Repository navigation
[system][material-ui] Scope the CSS theme variables of nested and sibling ThemeProviders - #49581
Draft
aarongarciah wants to merge 9 commits into
Draft
aarongarciah wants to merge 9 commits into
aarongarciah wants to merge 9 commits into
Conversation
…ling ThemeProviders Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HG4YYGmgsLG7riohZnG1WZ
…bles Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HG4YYGmgsLG7riohZnG1WZ
aarongarciah
added
customization: theme
Deploy previewBundle size
PerformanceNo regressions in 32 benchmarks · ran 4m 33s · details Check out the code infra dashboard for more information about this PR. |
…ded type - Fix the intro of "Nested and multiple theme providers": sibling providers also write to `:root`, only nested or `scoped` ones are scoped. - Mention the dev warning for sibling providers, and that a `scoped` name suffixes both storage keys. - Note in the theming guide that only nested themes whose variables differ are wrapped. - Remove the internal `generateCssVarsByColorScheme` type from `CssVarsTheme`; it's only read through untyped code. - Sort the `scoped` propType alphabetically. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Keep `generateStyleSheets` and the color scheme selector effect as they are on master. `generateCssVarsByColorScheme` and `getColorSchemeRule` are now only used for scoping. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Every nested provider generated and diffed the CSS variables of both themes on mount, which made 100 nested providers mount about 33% slower than on master. The result only depends on the themes, so cache it. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Measures mounting a root provider, and 100 nested providers whose CSS variables are the same as or differ from the outer theme's.
… theme note" This reverts commit 1451e77.
aarongarciah
added
the
breaking change
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Before: with CSS theme variables, every
ThemeProviderwrites to:root, so nested themes are ignored and sibling providers overwrite each other.After: a nested provider whose variables differ writes only the changed ones on a
display: contentswrapper (.mui-theme-<hash>). A sibling provider opts in withscoped, and unscoped siblings get a dev warning. Modal and Popper apply the scope to portaled content, anduseThemeScope()does it for other portals.Needed before #49291.
Known cost: the wrapper breaks direct-child selectors, including
Stack's sibling margins.