update component

mui · siriwatknp · Dec 9, 2022 · Nov 19, 2022 · Nov 21, 2022 · Nov 21, 2022
commit 5448300ee68dacf51143215471dc5db2025deb52
diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
 import {
   styled,
-  ThemeProvider,
   Theme,
   ThemeOptions,
   alpha,
-  useCssThemeVars,
   experimental_extendTheme as extendTheme,
+  Experimental_CssVarsProvider as CssVarsProvider,
 } from '@mui/material/styles';
-import GlobalStyles from '@mui/material/GlobalStyles';
 import { capitalize } from '@mui/material/utils';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
@@ -36,7 +34,7 @@ import VerifiedUserRounded from '@mui/icons-material/VerifiedUserRounded';
 import HelpCenterRounded from '@mui/icons-material/HelpCenterRounded';
 import ROUTES from 'docs/src/route';
 import Link from 'docs/src/modules/components/Link';
-import { getThemedComponents } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
 
 const Grid = styled('div')(({ theme }) => [
   {
@@ -126,7 +124,7 @@ function Demo({
   ...props
 }: {
   name: string;
-  theme: Theme;
+  theme: Theme | undefined;
   children: React.ReactElement;
   control?: { prop: string; values: Array<string>; defaultValue?: string };
 }) {
@@ -174,13 +172,21 @@ function Demo({
         className="mui-default-theme"
         sx={{ flexGrow: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
       >
-        <ThemeProvider theme={props.theme}>
-          {React.cloneElement(children, {
+        {props.theme ? (
+          <CssVarsProvider disableStyleSheetGeneration theme={props.theme}>
+            {React.cloneElement(children, {
+              ...(control && {
+                [control.prop]: propValue,
+              }),
+            })}
+          </CssVarsProvider>
+        ) : (
+          React.cloneElement(children, {
             ...(control && {
               [control.prop]: propValue,
             }),
-          })}
-        </ThemeProvider>
+          })
+        )}
       </Box>
       <Typography fontWeight="semiBold" variant="body2">
         {name}
@@ -478,23 +484,28 @@ export function buildTheme(): ThemeOptions {
   };
 }
 
-const defaultTheme = extendTheme();
+const { palette: lightPalette, typography, ...designTokens } = getDesignTokens('light');
+const { palette: darkPalette } = getDesignTokens('dark');
+export const customTheme = extendTheme({
+  cssVarPrefix: 'muidocs',
+  colorSchemes: {
+    light: {
+      palette: lightPalette,
+    },
+    dark: {
+      palette: darkPalette,
+    },
+  },
+  ...designTokens,
+  ...buildTheme(),
+});
 
 export default function MaterialDesignComponents() {
   const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);
   const [customized, setCustomized] = React.useState(false);
-  const { theme: scopedTheme, styles } = useCssThemeVars(defaultTheme, {
-    selector: {
-      root: '.mui-default-theme',
-      defaultColorScheme: (key) =>
-        `.mui-default-theme, [data-mui-color-scheme="${key}"] .mui-default-theme`,
-      scopedColorScheme: (key) => `[data-mui-color-scheme="${key}"] .mui-default-theme`,
-    },
-  });
-  const theme = customized ? (buildTheme() as Theme) : scopedTheme;
+  const theme = customized ? customTheme : undefined;
   return (
     <div>
-      <GlobalStyles styles={styles} />
       <Box
         sx={{
           mt: { xs: 2, md: 4 },

diff --git a/docs/src/components/productCore/CoreComponents.tsx b/docs/src/components/productCore/CoreComponents.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  experimental_extendTheme as extendTheme,
-  styled,
-} from '@mui/material/styles';
+import { Experimental_CssVarsProvider as CssVarsProvider, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Alert from '@mui/material/Alert';
 import Button from '@mui/material/Button';
@@ -32,7 +28,7 @@ import Item, { Group } from 'docs/src/components/action/Item';
 import Highlighter from 'docs/src/components/action/Highlighter';
 import More from 'docs/src/components/action/More';
 import Frame from 'docs/src/components/action/Frame';
-import { buildTheme } from 'docs/src/components/home/MaterialDesignComponents';
+import { customTheme } from 'docs/src/components/home/MaterialDesignComponents';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
@@ -135,8 +131,6 @@ const CODES = {
 `,
 };
 
-const customTheme = extendTheme(buildTheme());
-
 export default function CoreComponents() {
   const [demo, setDemo] = React.useState<typeof DEMOS[number]>(DEMOS[0]);
   const [customized, setCustomized] = React.useState(false);