[material-ui] Support nested theme when upper theme is CSS vars theme

packages/mui-material/src/styles/ThemeProvider.js

@@ -6,11 +6,19 @@ import THEME_ID from './identifier';
 
 export default function ThemeProvider({ theme: themeInput, ...props }) {
   const scopedTheme = themeInput[THEME_ID];
+  let finalTheme = scopedTheme || themeInput;
+  if (typeof themeInput !== 'function') {
+    if (scopedTheme && !scopedTheme.vars) {
+      finalTheme = { ...scopedTheme, vars: null };
+    } else if (themeInput && !themeInput.vars) {
+      finalTheme = { ...themeInput, vars: null };
+    }
+  }
   return (
     <SystemThemeProvider
       {...props}
       themeId={scopedTheme ? THEME_ID : undefined}
-      theme={scopedTheme || themeInput}
+      theme={finalTheme}
     />
   );
 }

packages/mui-material/src/styles/ThemeProvider.test.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui-internal/test-utils';
-import { ThemeProvider } from '@mui/material/styles';
+import {
+  ThemeProvider,
+  createTheme,
+  useTheme,
+  experimental_extendTheme as extendTheme,
+} from '@mui/material/styles';
+import Button from '@mui/material/Button';
 
 describe('ThemeProvider', () => {
   const { render } = createRenderer();
@@ -15,4 +21,33 @@ describe('ThemeProvider', () => {
       ),
     ).not.toWarnDev();
   });
+
+  it('should have `vars` as null for nested non-vars theme', () => {
+    const upperTheme = extendTheme();
+    const nestedTheme = createTheme({
+      palette: {
+        // @ts-ignore
+        ochre: {
+          main: '#E3D026',
+          light: '#E9DB5D',
+          dark: '#A29415',
+          contrastText: '#242105',
+        },
+      },
+    });
+    let theme: any;
+    function Component() {
+      theme = useTheme();
+      return <Button>Button</Button>;
+    }
+    render(
+      <ThemeProvider theme={upperTheme}>
+        <ThemeProvider theme={nestedTheme}>
+          <Component />
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+
+    expect(theme.vars).to.equal(null);
+  });
 });

packages/mui-material/src/styles/createTheme.js

@@ -24,7 +24,12 @@ function createTheme(options = {}, ...args) {
     ...other
   } = options;
 
-  if (options.vars) {
+  if (
+    options.vars &&
+    // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+    // `generateCssVars` is the closest identifier for checking that the `options` is a result of `extendTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+    options.generateCssVars === undefined
+  ) {
     throw new MuiError(
       'MUI: `vars` is a private field used for CSS variables support.\n' +
         'Please use another name.',

packages/mui-material/src/styles/createTheme.test.js

@@ -3,7 +3,12 @@ import { expect } from 'chai';
 import { createRenderer } from '@mui-internal/test-utils';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
-import { ThemeProvider, createTheme, styled } from '@mui/material/styles';
+import {
+  ThemeProvider,
+  createTheme,
+  styled,
+  experimental_extendTheme as extendTheme,
+} from '@mui/material/styles';
 import { deepOrange, green } from '@mui/material/colors';
 
 describe('createTheme', () => {
@@ -311,4 +316,38 @@ describe('createTheme', () => {
       );
     }
   });
+
+  it('should not throw for nested theme that includes `vars` node', () => {
+    const outerTheme = extendTheme({
+      colorSchemes: {
+        light: {
+          palette: {
+            secondary: {
+              main: deepOrange[500],
+            },
+          },
+        },
+      },
+    });
+
+    expect(() =>
+      render(
+        <ThemeProvider theme={outerTheme}>
+          <ThemeProvider
+            theme={(theme) => {
+              return createTheme({
+                ...theme,
+                palette: {
+                  ...theme.palette,
+                  primary: {
+                    main: green[500],
+                  },
+                },
+              });
+            }}
+          />
+        </ThemeProvider>,
+      ),
+    ).not.to.throw();
+  });
 });