[material-ui] Support Pigment CSS for CssBaseline, ScopedCssBaseline and Popper
#42640
Conversation
siriwatknp
added
package: material-ui
v6.x
package: pigment-css
siriwatknp
requested review from
DiegoAndai and
mnajdova
and removed request for
michaldudak
Netlify deploy previewhttps://deploy-preview-42640--material-ui.netlify.app/ ScopedCssBaseline: parsed: +11.09% , gzip: +8.41% Bundle size reportDetails of bundle changes (Toolpad) |
| // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications. | ||
| ...(enableColorScheme && !theme.vars && { colorScheme: theme.palette.mode }), | ||
| ...(enableColorScheme && | ||
| !theme.vars && { [`&:has(.${SELECTOR})`]: { colorScheme: theme.palette.mode } }), |
There was a problem hiding this comment.
Glad we bump safari to 15.4, otherwise I have no clue how to make it work 😊
| <React.Fragment> | ||
| <GlobalStyles styles={(theme) => styles(theme, enableColorScheme)} /> | ||
| <GlobalStyles /> | ||
| {enableColorScheme && <span className={SELECTOR} style={{ display: 'none' }} />} |
There was a problem hiding this comment.
What’s the need for enableColorScheme: false?
In other words, why would anyone want the browser to show light color scheme for a dark theme?
Having a hanging span element is another freak (break of principle of least surprise).
There was a problem hiding this comment.
That's a good argument, I think we should revisit in v7. For v6 we try to keep the breaking changes minimal, so I wouldn't just the API just yet, only add the opt in support for Pigment CSS.
There was a problem hiding this comment.
Can we do the opposite here? Only a DOM node if the prop is false?
github-actions
bot
added
the
PR: out-of-date
Added the demo page and capture the clip in the PR description. |
github-actions
bot
removed
the
PR: out-of-date
…ne` and `Popper` (mui#42640)
6 participants
Part of #41273
Screen.Recording.2567-06-21.at.15.34.32.mov