[material-ui] Fix theme object changes between renders (@siriwatknp)

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer, renderHook } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme, useColorScheme, useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 
@@ -46,6 +46,22 @@ describe('ThemeProvider', () => {
     ).not.toWarnDev();
   });
 
+  it('theme should be stable between renders if created outside of component', () => {
+    const theme = createTheme();
+    const themeContext = renderHook(
+      () => {
+        return useTheme();
+      },
+      {
+        wrapper: ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>,
+      },
+    );
+    const firstRender = themeContext.result.current;
+    themeContext.rerender();
+    const secondRender = themeContext.result.current;
+    expect(firstRender).to.equal(secondRender);
+  });
+
   describe('light & dark', () => {
     function ModeSwitcher() {
       const { mode, setMode } = useColorScheme();

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

@@ -80,17 +80,24 @@ export default function ThemeProvider<Theme = DefaultTheme>({
   theme,
   ...props
 }: ThemeProviderProps<Theme>) {
-  if (typeof theme === 'function') {
-    return <ThemeProviderNoVars theme={theme} {...props} />;
-  }
-  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} />;
+  const noVarsTheme = React.useMemo(() => {
+    if (typeof theme === 'function') {
+      return theme;
+    }
+    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 { ...theme, vars: null };
+      }
+      return theme;
     }
-    return <ThemeProviderNoVars theme={theme} {...props} />;
+    return null;
+  }, [theme]);
+
+  if (noVarsTheme) {
+    return <ThemeProviderNoVars theme={noVarsTheme} {...props} />;
   }
   return <CssVarsProvider theme={theme as unknown as CssVarsTheme} {...props} />;
 }