Open callumbooth opened 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
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
.
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 withtoastOptions.unstyled = true
Steps to reproduce the bug 🔁:
.cancelbtn { background: red !important; }
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?