revert and add comment

siriwatknp · Feb 20, 2025 · 7a63e88 · 7a63e88
1 parent 30265e0
commit 7a63e88
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { deepmerge } from '@mui/utils';
-import { ThemeProvider, createTheme, PaletteColorOptions } from '@mui/material/styles';
+import { CssVarsProvider, extendTheme, PaletteColorOptions } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
 import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
@@ -16,11 +16,9 @@ declare module '@mui/material/styles' {
 const { palette: lightPalette, typography, ...designTokens } = getDesignTokens('light');
 const { palette: darkPalette } = getDesignTokens('dark');
 
-const theme = createTheme({
-  cssVariables: {
-    cssVarPrefix: 'muidocs',
-    colorSchemeSelector: 'data-mui-color-scheme',
-  },
+const theme = extendTheme({
+  cssVarPrefix: 'muidocs',
+  colorSchemeSelector: 'data-mui-color-scheme',
   colorSchemes: {
     light: {
       palette: lightPalette,
@@ -53,12 +51,13 @@ const theme = createTheme({
 export default function BrandingCssVarsProvider(props: { children: React.ReactNode }) {
   const { children } = props;
   return (
-    <ThemeProvider theme={theme} disableTransitionOnChange>
+    // Need to use deprecated CssVarsProvider because MUI X repo still on Material UI v5
+    <CssVarsProvider theme={theme} disableTransitionOnChange>
       <NextNProgressBar />
       <CssBaseline />
       <SkipLink />
       <MarkdownLinks />
       {children}
-    </ThemeProvider>
+    </CssVarsProvider>
   );
 }