Introduce API to override styles in `Toast` component
pawelgrimm opened this issue ยท 0 comments
pawelgrimm commented
๐ Feature request
Motivation
The Toast
component should expose a way to customize/override the style of Reactist components rendered within it. Right now, all styles are shared with the global styling.
Example
Let's say your app's content is primary displayed on a light background, but you want to have toast with a dark background. If you wanted to style TextLink
differently on the light vs dark background, you couldn't easily do that.
Possible implementations
I see two ways to go about this:
- Expose a global toast class that consuming code could use to override CSS components within the toast:
// In app code :global(.toastContainer) { --reactist-text-link-idle-tint: var(--special-toast-text-link-color); }
- Expose separate CSS variables to certain supported styles (like we do with
--reactist-toast-actionable-*
CSS vars)// In Reactist's toast.module.css .toastContainer { --reactist-text-link-idle-tint: var(--reactist-toast-text-link-idle-tint); }