Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce API to override styles in Toast component #727

Open
pawelgrimm opened this issue Dec 15, 2022 · 0 comments
Open

Introduce API to override styles in Toast component #727

pawelgrimm opened this issue Dec 15, 2022 · 0 comments

Comments

@pawelgrimm
Copy link
Contributor

🚀 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:

  1. 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);
    }
  2. 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);
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant