带有 next.js 的 material-ui 样式

【问题标题】：material-ui styles with next.js带有 next.js 的 material-ui 样式
【发布时间】：2021-10-05 15:51:57
【问题描述】：

我无法让 Material-ui 样式与 next.js 一起正常工作。当我更改样式然后在运行开发服务器时保存时，样式会被应用，但是如果我重新加载页面、保存任何其他更改或重新启动服务器，默认的 material-ui 样式会覆盖我的自定义样式。此外，每当我使用 Box material-ui 组件时，我都会在控制台中看到此错误：

react-dom.development.js:67 Warning: Prop `className` did not match. Server: "MuiBox-root MuiBox-root-3 makeStyles-boxStyles-1" Client: "MuiBox-root MuiBox-root-4 makeStyles-boxStyles-1"

这是我的 _document.tsx：https://pastebin.com/wJD9jyZQ

这是我的 _app.tsx：https://pastebin.com/s8Ys01kb

这是我的 index.tsx：https://pastebin.com/t5Z9QGpP

这里是 index.styles.ts（我的自定义样式所在的位置）：https://pastebin.com/qe7M5ysq

【问题讨论】：

标签： reactjs material-ui next.js styled-components

【解决方案1】：

在 _document.js 文件中，您需要使用 ServerStyleSheets 对象增强 App。

对于 Material UI v4，您需要导入：

import { ServerStyleSheets } from '@material-ui/core/styles';

对于 Material UI v5，您需要导入：

import { ServerStyleSheets } from '@material-ui/styles';

然后在文件后面：

const sheets = new ServerStyleSheets();

...

enhanceApp: (App: any) => (props) => sheets.collect(<App ... />),

看到这个v4 example

即使 v5 示例不包含 ServerStyleSheets

，上述内容也适用于 v5

【讨论】：