我正在使用 Next js 和 Material UI(@mui/core) 创建一个网站。当我使用
next devnext build && next start_document.jsimport * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import theme from "../src/theme";
import createEmotionCache from "../src/createEmotionCache";
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="shortcut icon" href="/static/favicon.ico" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
{/* Inject MUI styles first to match with the prepend: true configuration. */}
{this.props.emotionStyleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render
const originalRenderPage = ctx.renderPage;
// You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) =>
function EnhanceApp(props) {
return <App emotionCache={cache} {...props} />;
},
});
const initialProps = await Document.getInitialProps(ctx);
// This is important. It prevents emotion to render invalid HTML.
// See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={`${style.key} ${style.ids.join(" ")}`}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));
return {
...initialProps,
emotionStyleTags,
};
};
克隆这个存储库 https://github.com/mui-org/material-ui/tree/master/examples/nextjs 如果您使用情感，请确保您已更新 _app.js 并添加 createEmotionCache。 对于元素的样式，请尝试使用材质 ui 样式而不是 CSS 模块
这是另一个示例用法：https://github.com/ilhammeidi/luxi-starter/blob/master/pages/_app.js
我认为
createEmotionCacheimport React, { useState } from 'react';
import Head from 'next/head';
import App from 'next/app';
import PropTypes from 'prop-types';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import rtlPlugin from 'stylis-plugin-rtl';
import { prefixer } from 'stylis';
import CssBaseline from '@mui/material/CssBaseline';
import appTheme from '../theme/appTheme';
const isBrowser = typeof document !== 'undefined';
let insertionPoint;
if (isBrowser) {
const emotionInsertionPoint = document.querySelector(
'meta[name="emotion-insertion-point"]',
);
insertionPoint = emotionInsertionPoint ?? undefined;
}
const cacheRTL = createCache({
key: 'mui-style-rtl',
stylisPlugins: [prefixer, rtlPlugin],
insertionPoint,
prepend: true,
});
const cacheLTR = createCache({
key: 'mui-style-ltr',
insertionPoint,
prepend: true,
});
function MyApp(props) {
const { Component, pageProps, router } = props;
const themeName = 'burgundy';
const defaultTheme = 'light';
const [theme, setTheme] = useState({
...appTheme(themeName, defaultTheme),
direction: 'ltr',
});
const muiTheme = createTheme(theme);
return (
<CacheProvider value={theme.direction === 'rtl' ? cacheRTL : cacheLTR}>
<Head>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
</Head>
<ThemeProvider theme={muiTheme}>
<CssBaseline />
<div id="main-wrap">
<Component
{...pageProps}
key={router.route}
/>
</div>
</ThemeProvider>
</CacheProvider>
);
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
pageProps: PropTypes.object.isRequired,
router: PropTypes.object.isRequired
};
MyApp.getInitialProps = async (appContext) => ({ ...(await App.getInitialProps(appContext)) });
export default MyApp;