[system] Prevent nested non-vars theme inheritance

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
-import { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';
+import { ThemeProvider, createTheme, useColorScheme, useTheme } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 
 describe('ThemeProvider', () => {
   const { render } = createRenderer();
@@ -109,4 +110,37 @@ describe('ThemeProvider', () => {
       expect(getByTestId('mode-switcher')).to.have.property('value', 'dark');
     });
   });
+
+  describe('nested ThemeProvider', () => {
+    it('should have `vars` as null for nested non-vars theme', () => {
+      const upperTheme = createTheme({
+        cssVariables: true,
+      });
+      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/ThemeProvider.tsx

@@ -91,6 +91,11 @@ export default function ThemeProvider<Theme = DefaultTheme>({
   }
   const muiTheme = (THEME_ID in theme ? theme[THEME_ID] : theme) as ThemeProviderProps['theme'];
   if (!('colorSchemes' in muiTheme)) {
+    if (!('vars' in muiTheme)) {
+      // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
+      // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
+      return <ThemeProviderNoVars theme={{ ...theme, vars: null }} {...props} />;
+    }
     return <ThemeProviderNoVars theme={theme} {...props} />;
   }
   return <CssVarsProvider theme={theme as unknown as CssVarsTheme} {...props} />;