Material 样式未加载到生产版本中

Question

我目前正在使用 Nextjs 和 Material UI 进行一个项目。在开发模式下一切都很好。当我构建项目时，第一页加载得很好，但是当我导航到第二页时，很多组件加载时没有样式，例如对话框。

在开发模式中：

在生产版本中：

我猜这要么是情绪缓存没有正确注入 SSR 的问题，要么是我使用 Link 组件的方式有问题：

    //Link from next/link
    <Link href={href}>
      <ButtonBase sx={{ width: "100%" }}>
        <CardContent item={item} />
      </ButtonBase>
    </Link

情感缓存是这样实现的：https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript

React 版本：18.1.0（我也尝试过 17.0.2 和 18.0 版本）下一个：12.1.6 MUI: 5.7

This question建议使用ServerStyleSheets，MUI5.

中没有包含

有没有其他人遇到过同样的问题？

Answer 1

尝试像这样更新 _document 文件：

您可以使用默认的 _document 文件，只需添加 getInitialProps 部分

import React from 'react';
import Document, {
  Html, Head, Main, NextScript,
} from 'next/document';
import { ServerStyleSheets } from '@mui/styles'; // works with @material-ui/core/styles, if you prefer to use it.

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side 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

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () => originalRenderPage({
    enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
  });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

Answer 2

我首先将这些软件包升级到最新版本，从而成功解决了这个问题：

@emotion/cache
@emtion/react
@emotion/server
@emotion/styled
@mui
下一个
反应 & React-dom

然后，在将我的项目与 example repo 进行彻底比较并发现我遗漏了这个之后，我将属性添加到 tsconfig.json：

    "jsxImportSource": "@emotion/react",

我不完全确定这些操作中的哪一个真正解决了问题，但我猜是后者。

如果您运行遇到类似的问题，您可以尝试将它添加到您的 tsconfig 中，看看它是否能解决问题。

Material 样式未加载到生产版本中

Material styling not loading in production build

emotion

reactjs

material-ui

server-side-rendering

next.js