[CSS variables] Nested theme

[mtr1990]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Before when using nested themes with ThemeProvider and it worked fine.

I recently switched to CSS variables to better support next.js in Darkmode.

  const theme = experimental_extendTheme(deepmerge(defaultTheme, themeOptions));

  return <CssVarsProvider theme={theme}>{children}</CssVarsProvider>;

Above code works fine with following version dependencies:

"@emotion/cache": "^11.9.3",
"@emotion/react": "^11.9.3",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.9.3",
"@mui/material": "^5.8.6",
"next": "^12.2.0",

But after i upgrade the dependencies get the following errors

"@emotion/cache": "^11.10.3",
"@emotion/react": "^11.10.4",
"@emotion/server": "^11.10.0",
"@emotion/styled": "^11.10.4",
"@mui/material": "^5.10.4",
"next": "^12.3.0",

Expected behavior 🤔

No error when setting up

Steps to reproduce 🕹

Steps:

Context 🔦

Nested theme:

 <CssVarsProvider theme={outerTheme}>
      <Checkbox defaultChecked color="secondary" />
      < CssVarsProvider theme={theme}
      >
        <Checkbox defaultChecked />
        <Checkbox defaultChecked color="secondary" />
      </CssVarsProvider >
    </CssVarsProvider>

based on CSS variables:
https://mui.com/material-ui/experimental-api/css-variables/#main-content

use CssVarsProvider instead of ThemeProvider

Sanbox : https://codesandbox.io/s/keen-lewin-bkchg9?file=/demo.tsx

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[siriwatknp]

@mtr1990 First of all, thank you so much for opening the issue. I have been waiting for the nesting CSS variables theme.

Before we jump to a conclusion, can you first share why you need a nested CSS variables theme?

[mtr1990]

Hi @siriwatknp ,

Thanks for your feedback on this issue

Actually the functions change color, or switch light/dark mode… I can work directly on a single theme without nesting.

But in terms of component management, it won't be optimized

Currently the structure I'm using with ThemeProvider looks like this:

    <ThemeProvider>
      <DarkModeProvider>
        <ChangePrimaryColorProvider>{children}</ChangePrimaryColorProvider>
      </DarkModeProvider>
    </ThemeProvider>

https://codesandbox.io/s/awesome-ellis-rt1ol9?file=/theme/palette.ts

You can remove functions like : or

When not in use without affecting the main structure of the theme.

I also want to apply this similar structure when using with

[pinkishincoloragain]

I have the same needs for the nested cssVarsProvider, and wondering if there will be an update with the feature.

[siriwatknp]

I have the same needs for the nested cssVarsProvider, and wondering if there will be an update with the feature.

Can you share a codesandbox that I can take a look?

[Yukigamine]

Can you share a codesandbox that I can take a look?

I ran into the same issue. Here's a codesandbox using the docs example for nested themes.
https://codesandbox.io/p/devbox/flsx8m

On the root / page it's using nested with cssVariables: true and the error pictured above occurs.
If you navigate to /novars, it uses the exact example from the docs without cssVariables in the outer theme and there is no error.

[jcohen14]

Wanted to bump this. Having the same issue. My app uses the new css variables in v6 but we have needs for certain parts of the app to force light mode or force dark mode.

One of our use cases is a modal containing an iframe to a page that does not support dark mode, so we need to force the surrounding modal into light mode to keep a consistent experience. We also have a different part of the app that we want to always have the inverse color scheme of the system one (i.e. in dark mode this part of the app would be light mode and vice versa).