reactjs - Material 样式未加载到生产构建中

Question

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

在开发模式下:

在生产构建中:

我猜这要么是情绪缓存没有正确注入(inject) 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多用户界面:5.7

This question建议使用 MUI5 中未包含的 ServerStyleSheets。

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

Answer 1

我已经通过首先将这些软件包升级到最新版本来自己解决了这个问题:

• @emotion/缓存
• @emtion/ react
• @emotion/服务器
• @emotion/风格
• @mui
• 下一步
• React 和 React-dom

然后，在将我的项目与 example repo 进行彻底比较后，我向 tsconfig.json 添加了一个属性。并发现我错过了这个:

    "jsxImportSource": "@emotion/react",

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

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