Skip to content

Commit

Permalink
[docs] Fix CSS theme variables section (#43439)
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp authored Aug 26, 2024
1 parent 4a85313 commit 71a7ff1
Showing 1 changed file with 12 additions and 13 deletions.
25 changes: 12 additions & 13 deletions docs/data/material/integrations/nextjs/nextjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 flickering](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering).

### Using other styling solutions

Expand Down Expand Up @@ -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 flickering](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering).

0 comments on commit 71a7ff1

Please sign in to comment.