Ustyled prop and close button

[rlesniak]

Despite setting closeButton: '-right-1 top-2 left-auto text-teal-500 border-none hover:bg-teal-500'

<SonnerToaster
  toastOptions={{
    unstyled: true,
    duration: 100_000,
    closeButton: true,
    classNames: {
      toast: 'group toast rounded-lg flex items-center gap-5 px-4 py-2 pr-6',
      content: ' flex items-center',
      closeButton:
        '-right-1 top-2 left-auto text-teal-500 border-none hover:bg-teal-500',
      success: 'bg-teal-100 border border-teal-200 text-teal-800 text-lg',
    },
  }}
/>

I still get hover style for close button. I dont want this

[Wordllban]

I found the solution, you need to use ! which makes tailwindcss utility classes to use css !important like:

closeButton:
        '-right-1 top-2 left-auto text-teal-500 border-none !hover:bg-teal-500'

But this won't work with hover or other pseudo-class

I guess selector from this line just have more weight (you can learn about weights there)
https://github.com/emilkowalski/sonner/blob/main/src/styles.css#L248

So I ended up with override of this selector in project global.css file:

:where([data-sonner-toast]):hover :where([data-close-button]):hover {
    background: none !important;
    border-color: blue !important;
}

[cleytoncarvalho]

I encountered the same issue. I believe it makes more sense for the closeButton to have no styles when {unstyled: true} is applied.