Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][docs] Fix createTheme import and markdown format in the Next.js guide #40895

Merged
merged 5 commits into from
Feb 3, 2024
Merged

[material-ui][docs] Fix createTheme import and markdown format in the Next.js guide #40895

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
92a1ef1
createTheme is imported twice
hsmtkk Feb 2, 2024
9befd30
Merge branch 'master' into pr/40895
danilo-leal Feb 2, 2024
705c42b
Update docs/data/material/guides/nextjs/nextjs.md
oliviertassinari Feb 3, 2024
bc76d36
more fixes
oliviertassinari Feb 3, 2024
d27fddc
cleaner git diff
oliviertassinari Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 18 additions & 19 deletions docs/data/material/guides/nextjs/nextjs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,9 @@ Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elemen
return (
<html lang="en">
<body>
- {props.children}
+ <AppRouterCacheProvider>{props.children}</AppRouterCacheProvider>
+ <AppRouterCacheProvider>
{props.children}
+ </AppRouterCacheProvider>
</body>
</html>
);
Expand All @@ -66,8 +67,6 @@ Create a new file and export a custom theme that includes the `'use client';` di
```js
// src/theme.ts
'use client';
import { createTheme } from '@mui/material/styles';

import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';

Expand All @@ -91,8 +90,8 @@ Then in `src/app/layout.tsx`, pass the theme to `ThemeProvider`:
```diff
// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+ import { ThemeProvider } from '@mui/material/styles';
+ import theme from '../theme';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../theme';

export default function RootLayout(props) {
const { children } = props;
Expand All @@ -119,12 +118,12 @@ If you want to use [CSS theme variables](/material-ui/experimental-api/css-theme
```diff
// src/theme.ts
'use client';
- import { createTheme } from '@mui/material/styles';
+ import { extendTheme } from '@mui/material/styles';
-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';
-import { ThemeProvider } from '@mui/material/styles';
+import { CssVarsProvider } from '@mui/material/styles';
```

Learn more about [the advantages of CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/#advantages).
Expand Down Expand Up @@ -228,10 +227,10 @@ To use a custom [Emotion cache](https://emotion.sh/docs/@emotion/cache), pass it
...

MyDocument.getInitialProps = async (ctx) => {
const finalProps = await documentGetInitialProps(ctx, {
+ emotionCache: createCustomCache(),
});
return finalProps;
const finalProps = await documentGetInitialProps(ctx, {
+ emotionCache: createCustomCache(),
});
return finalProps;
};
```

Expand Down Expand Up @@ -303,10 +302,10 @@ MyDocument.getInitialProps = async (ctx) => {
If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props interface:

```diff
+ import type { DocumentHeadTagsProps } from '@mui/material-nextjs/v13-pagesRouter';
// or `v1X-pagesRouter` if you are using Next.js v1X
+import type { DocumentHeadTagsProps } from '@mui/material-nextjs/v13-pagesRouter';
// or `v1X-pagesRouter` if you are using Next.js v1X

+ export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) {
+export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) {
...
}
```
Expand Down Expand Up @@ -340,9 +339,9 @@ In `pages/_app.tsx`, create a new theme and pass it to `ThemeProvider`:
return (
<AppCacheProvider {...props}>
<Head>...</Head>
+ <ThemeProvider theme={theme}>
+ <ThemeProvider theme={theme}>
<Component {...pageProps} />
+ </ThemeProvider>
+ </ThemeProvider>
</AppCacheProvider>
);
}
Expand Down
Loading