search

emilkowalski / sonner

An opinionated toast component for React.
https://sonner.emilkowal.ski
MIT License
8.53k stars 268 forks source link

Can't style cancel action without !important #321

Open callumbooth opened 8 months ago

callumbooth commented 8 months ago

Describe the feature / bug 📝:

It's not currently possible to style some of the toast elements without using classes with !important. It looks to be due to the styles.css using higher priority styles than the classes being applied via toastOptions.classNames. This happens even with toastOptions.unstyled = true

Steps to reproduce the bug 🔁:

  1. Go to https://codesandbox.io/p/sandbox/sonner-unstyled-2pmt92
  2. click the "show toast" button and see that the dismiss button in the toast is not red.
  3. go to styles.css and change the css to .cancelbtn { background: red !important; }
  4. Click the "show toast" button again and see that the dismiss button is now red.

Additional comments

It looks like unstyled doesn't completely unstyle the toast. Its also not possible to make the icon bigger than 16px without using important for the same reason. It might also be good to add an icon class so that we can apply styles to the <div data-icon=""> div?

iodimitrov commented 8 months ago

Can reproduce when I try to style the error variant using Tailwind. Have to use group-[.toaster]:!bg-red-600 in order for it to work. The text color and the border are styled properly, without the need to use !important

trevormcnaughton commented 8 months ago

I am seeing the same issue with the closeButton. Seems as if the unstyled configuration is not being respected in some cases. The custom classes get applied to the button however it's still being styled with the [data- selectors from the css file.

dseeto commented 8 months ago

Seeing this issue as well, doesn't seem to be possible to style the closeButton when the Toaster is unstyled without using more specific css selectors or !important.