Can't style cancel action without !important

[callumbooth]

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]

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]

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]

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.

[emilkowalski]

Fixed the unstyled prop in #573. I've also updated the styling docs with some more information on how to style things - https://sonner.emilkowal.ski/styling.