diff --git a/examples/material-next-ts-v4-v5-migration/pages/_document.tsx b/examples/material-next-ts-v4-v5-migration/pages/_document.tsx
index 061bb265186e09..89f7729966e9a6 100644
--- a/examples/material-next-ts-v4-v5-migration/pages/_document.tsx
+++ b/examples/material-next-ts-v4-v5-migration/pages/_document.tsx
@@ -1,32 +1,42 @@
import * as React from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, {
+ Html,
+ Head,
+ Main,
+ NextScript,
+ DocumentProps,
+ DocumentContext,
+} from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
import { ServerStyleSheets as JSSServerStyleSheets } from '@mui/styles';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
-export default class MyDocument extends Document {
- render() {
- return (
-
-
- {/* PWA primary color */}
-
-
-
- {/* Inject MUI styles first to match with the prepend: true configuration. */}
- {(this.props as any).emotionStyleTags}
-
-
-
-
-
-
- );
- }
+interface MyDocumentProps extends DocumentProps {
+ emotionStyleTags: EmotionJSX.Element[];
+}
+
+export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
+ return (
+
+
+ {/* PWA primary color */}
+
+
+
+ {/* Inject MUI styles first to match with the prepend: true configuration. */}
+ {emotionStyleTags}
+
+
+
+
+
+
+ );
}
// You can find a benchmark of the available CSS minifiers under
@@ -51,7 +61,7 @@ if (process.env.NODE_ENV === 'production') {
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
-MyDocument.getInitialProps = async (ctx) => {
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
// Resolution order
//
// On the server:
diff --git a/examples/material-next-ts/pages/_document.tsx b/examples/material-next-ts/pages/_document.tsx
index dace6b64d9a4d6..6a512ad6f88b69 100644
--- a/examples/material-next-ts/pages/_document.tsx
+++ b/examples/material-next-ts/pages/_document.tsx
@@ -1,32 +1,42 @@
import * as React from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, {
+ Html,
+ Head,
+ Main,
+ NextScript,
+ DocumentProps,
+ DocumentContext,
+} from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
import theme, { roboto } from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
-export default class MyDocument extends Document {
- render() {
- return (
-
-
- {/* PWA primary color */}
-
-
-
- {(this.props as any).emotionStyleTags}
-
-
-
-
-
-
- );
- }
+interface MyDocumentProps extends DocumentProps {
+ emotionStyleTags: EmotionJSX.Element[];
+}
+
+export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
+ return (
+
+
+ {/* PWA primary color */}
+
+
+
+ {emotionStyleTags}
+
+
+
+
+
+
+ );
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
-MyDocument.getInitialProps = async (ctx) => {
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
// Resolution order
//
// On the server:
diff --git a/examples/material-next/pages/_document.js b/examples/material-next/pages/_document.js
index f1c83a9250ae77..d3c7c4512c4e38 100644
--- a/examples/material-next/pages/_document.js
+++ b/examples/material-next/pages/_document.js
@@ -1,27 +1,28 @@
import * as React from 'react';
+import PropTypes from 'prop-types';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme, { roboto } from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
-export default class MyDocument extends Document {
- render() {
- return (
-
-
- {/* PWA primary color */}
-
-
-
- {this.props.emotionStyleTags}
-
-
-
-
-
-
- );
- }
+export default function MyDocument(props) {
+ const { emotionStyleTags } = props;
+
+ return (
+
+
+ {/* PWA primary color */}
+
+
+
+ {emotionStyleTags}
+
+
+
+
+
+
+ );
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
@@ -82,3 +83,7 @@ MyDocument.getInitialProps = async (ctx) => {
emotionStyleTags,
};
};
+
+MyDocument.propTypes = {
+ emotionStyleTags: PropTypes.array.isRequired,
+};