Overriding styles not working
tinymachine opened this issue · comments
The readme mentions, "You can apply your own styles by either setting the individual properties using :global(.modal)...".
But this doesn't seem to work, I think because the components' built-in styles are scoped but :global() styles are not scoped, and so they have lower CSS specificity and don't override the scoped styles. (As a workaround I tried using !important on my :global() styles, which is usually a bad idea, but that didn't work — not sure why.)
Perhaps there's some way custom styles could be passed down to the component as props? For now I'll just copy the component into my own project and manually customize. Thanks again for a great set of components!
Thank you once more for your contribution @tinymachine! I tested it and this indeed doesn't work (anymore). It used to but Astro has updated quite a bit since then 🙂 A solution to this is for me to set all the component style tags to is:global so there is a better way to override it. Components from the package still have a higher specificity, so you'll need to add something like body .modal to override your styles in the end. I'll add that to the documentation as well!
Fixed in 1.5.0