New noSsr prop of ThemeProvider throws warning

[bc-m]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-yeet9i?file=Demo.tsx
2. 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/[email protected]/ThemeProvider/ThemeProvider.js:55:5)
at ThemeProviderNoVars (https://react-yeet9i.stackblitz.io/turbo_modules/@mui/[email protected]/node/styles/ThemeProviderNoVars.js:15:10)
at ThemeProvider (https://react-yeet9i.stackblitz.io/turbo_modules/@mui/[email protected]/node/styles/ThemeProvider.js:16:3)
at BasicButtons
at StyledEngineProvider (https://react-yeet9i.stackblitz.io/turbo_modules/@mui/[email protected]/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

#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]

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]

May be a warning about using noSsr would help?

[DiegoAndai]

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

material-ui/packages/mui-system/src/cssVars/createCssVarsProvider.js

Line 351 in 837c1a4

noSsr: PropTypes.bool,

[siriwatknp]

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

material-ui/packages/mui-system/src/cssVars/createCssVarsProvider.js

Line 351 in 837c1a4

noSsr: PropTypes.bool,

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?