我正在使用Next js和Material UI（@mui/core）创建一个网站。当我使用next dev运行它时，它工作得很好，但是当我使用next build && next start时，我得到了错误的样式。沿着Material UI，我还使用CSS模块来设计我的应用程序。
我在Github上找到了一个解决方案，说要在_document.js中添加此代码，但这对我不起作用。
import * 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,
};
};字符串
2条答案
按热度按时间g9icjywg1#
克隆这个仓库https://github.com/mui-org/material-ui/tree/master/examples/nextjs，并确保你已经更新了你的_app.js，如果你正在使用情感，请添加createEmotionCache。对于样式化你的元素，尝试使用材质ui样式而不是CSS模块
35g0bw712#
接下来的13个可用。你可以使用接下来的13个它简化了的实现和文件夹结构（App Router）。我用Typescript为Material UI 5创建了下一个13版本的样板文件，你可以使用它。它的运行与情感服务器缓存，以提高下一个js的速度，也实现了Metrial UI图标。
使用此样板文件
下一个js样板功能：
Repository Link
使用应用路由器提高Next.js应用的渲染速度