From 2778ae661ddd0da646770a31060de12fdf17d145 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 26 Aug 2024 15:46:45 +0700 Subject: [PATCH 1/2] fix docs --- .../material/integrations/nextjs/nextjs.md | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 75bcafea957d70..b21c0db80b6996 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -124,19 +124,16 @@ To learn more about theming, check out the [theming guide](/material-ui/customiz #### CSS theme variables -If you want to use [CSS theme variables](/material-ui/customization/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` utilities instead: +To use [CSS theme variables](/material-ui/customization/css-theme-variables/overview/), enable the `cssVariables` flag: ```diff title="src/theme.ts" 'use client'; --import { createTheme } from '@mui/material/styles'; -+import { extendTheme } from '@mui/material/styles'; - - // app/layout.tsx --import { ThemeProvider } from '@mui/material/styles'; -+import { CssVarsProvider } from '@mui/material/styles'; + const theme = createTheme({ ++ cssVariables: true, + }); ``` -Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages). +Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages) and how to [prevent SSR flicker](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering). ### Using other styling solutions @@ -367,11 +364,13 @@ To learn more about theming, check out the [Theming guide](/material-ui/customiz #### CSS theme variables -If you want to use [CSS theme variables](/material-ui/customization/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` instead: +To use [CSS theme variables](/material-ui/customization/css-theme-variables/overview/), enable the `cssVariables` flag: -```diff title="pages/_app.tsx" --import { ThemeProvider, createTheme } from '@mui/material/styles'; -+import { CssVarsProvider, extendTheme } from '@mui/material/styles'; +```diff title="src/theme.ts" + 'use client'; + const theme = createTheme({ ++ cssVariables: true, + }); ``` -Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages). +Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages) and how to [prevent SSR flicker](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering). From 5fa8b621cf6277425d214e462d01d1c76b9c4da2 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Mon, 26 Aug 2024 15:56:12 +0700 Subject: [PATCH 2/2] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Thanks @aarongarciah Co-authored-by: Aarón García Hervás Signed-off-by: Siriwat K --- docs/data/material/integrations/nextjs/nextjs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index b21c0db80b6996..721244eeafff8d 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -133,7 +133,7 @@ To use [CSS theme variables](/material-ui/customization/css-theme-variables/over }); ``` -Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages) and how to [prevent SSR flicker](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering). +Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages) and how to [prevent SSR flickering](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering). ### Using other styling solutions @@ -373,4 +373,4 @@ To use [CSS theme variables](/material-ui/customization/css-theme-variables/over }); ``` -Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages) and how to [prevent SSR flicker](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering). +Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages) and how to [prevent SSR flickering](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering).