Can't style cancel action without !important
callumbooth opened this issue · comments
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 🔁:
- Go to https://codesandbox.io/p/sandbox/sonner-unstyled-2pmt92
- click the "show toast" button and see that the dismiss button in the toast is not red.
- go to styles.css and change the css to
.cancelbtn { background: red !important; } - 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?
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
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.
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.