-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
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
[system] Add flags for nested CssVarsProvider #35277
Conversation
@material-ui/core: parsed: +0.06% , gzip: +0.09% |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some nits added, but overall this direction is much better than having a new nested provider component 👍 I would recommend in the PR description to add examples of a real use-cases where each if the scenarios would be useful :)
@@ -11,11 +11,15 @@ export default function DarkModeByDefault() { | |||
// the props below are specific to this demo, | |||
// you might not need them in your app. | |||
// | |||
theme={extendTheme({ cssVarPrefix: 'demo' })} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we create the theme outside of the render function.
@@ -41,8 +41,11 @@ export default function IdentifySystemMode() { | |||
// The props below are specific to this demo, | |||
// you might not need them in your app. | |||
// | |||
theme={extendTheme({ cssVarPrefix: 'demo' })} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here
@siriwatknp Just pointing out to issue #35236 if it helps. |
Changes
CssVarsProvider
won't generate a new style sheet if theupperTheme.cssVarPrefix
and the inputtheme.cssVarPrefix
is the same.CssVarsProvider
will not create a new react context.disableStyleSheetGeneration
to always skip the style sheet generation.disableNestedContext
to force the provider to create its own context.Here are the use cases:
Single source of state, multiple themes:
Single source of state, siblings have the same theme:
Separate state, same theme:
Separate state, different theme: