New `noSsr` prop of ThemeProvider throws warning

bc-m commented 5 days ago

Steps to reproduce

Steps:

Open this link to live example: https://stackblitz.com/edit/react-yeet9i?file=Demo.tsx
Look into console

Current behavior

Console warning:

Warning: Failed prop type: The following props are not supported: `noSsr`. Please remove them.
at ThemeProvider (https://react-yeet9i.stackblitz.io/turbo_modules/@mui/system@6.1.9/ThemeProvider/ThemeProvider.js:55:5)
at ThemeProviderNoVars (https://react-yeet9i.stackblitz.io/turbo_modules/@mui/material@6.1.9/node/styles/ThemeProviderNoVars.js:15:10)
at ThemeProvider (https://react-yeet9i.stackblitz.io/turbo_modules/@mui/material@6.1.9/node/styles/ThemeProvider.js:16:3)
at BasicButtons
at StyledEngineProvider (https://react-yeet9i.stackblitz.io/turbo_modules/@mui/styled-engine@6.1.9/node/StyledEngineProvider/StyledEngineProvider.js:56:5)

Expected behavior

No console warning.

Context

Release of v6.1.9 adds new noSsr prop for ThemeProvider: https://github.com/mui/material-ui/releases/tag/v6.1.9

https://github.com/mui/material-ui/pull/44451

Your environment

npx @mui/envinfo

Google Chrome Version 131.0.6778.86 (Offizieller Build) (arm64) ``` System: OS: macOS 15.1.1 Binaries: Node: 22.11.0 - /usr/local/bin/node npm: 10.9.0 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: 131.0.6778.86 Edge: Not Found Safari: 18.1.1 npmPackages: @emotion/react: 11.13.5 => 11.13.5 @emotion/styled: ^11.13.5 => 11.13.5 @mui/core-downloads-tracker: 6.1.9 @mui/icons-material: ^6.1.9 => 6.1.9 @mui/material: ^6.1.9 => 6.1.9 @mui/private-theming: 6.1.9 @mui/styled-engine: 6.1.9 @mui/system: ^6.1.9 => 6.1.9 @mui/types: 7.2.19 @mui/utils: 6.1.9 @mui/x-date-pickers: ^7.22.3 => 7.22.3 @mui/x-internals: 7.21.0 @types/react: ^18.3.12 => 18.3.12 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.7.2 => 5.7.2 ```

Search keywords: ThemeProvider noSsr

siriwatknp commented 4 days ago

Based on the docs, noSsr should be used when you have both light and dark color schemes:

<ThemeProvider theme={createTheme({ colorSchemes: { dark: true }})} noSsr>
  <Button variant="text">Text {console.log('render')}</Button>
</ThemeProvider>

There is no error with the above code.

siriwatknp commented 4 days ago

May be a warning about using noSsr would help?

DiegoAndai commented 3 days ago

@siriwatknp where's the warning coming from? I would expect proptypes to accept this:

https://github.com/mui/material-ui/blob/837c1a487d213740d32fbd554863e769c2e20e46/packages/mui-system/src/cssVars/createCssVarsProvider.js#L351

siriwatknp commented 11 hours ago

@siriwatknp where's the warning coming from? I would expect proptypes to accept this:

https://github.com/mui/material-ui/blob/837c1a487d213740d32fbd554863e769c2e20e46/packages/mui-system/src/cssVars/createCssVarsProvider.js#L351

I think the warning is correct.

The internal ThemeProviderNoVars does not accept noSsr. The author is using noSsr incorrectly. I think we could improve the DX by warning that noSsr can be used when you create a theme with light and dark color schemes.

What do you think?

mui / material-ui