那是因为 NextJS 使用 SSR。在 Material UI 文档中，有一部分完全专用于 NEXTJS：

https://material-ui.com/styles/advanced/#next-js

或者，如果你愿意，你可以检查 material-ui repo（查看 _app.js 和 _document.js）

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

我也遇到了这个问题并找到了解决方案。

问题源于这样一个事实，即 Mui (MakeStyles) 获取您的 CSS 类名称并尝试创建唯一名称以避免冲突。

你可以在这里阅读：https : //material-ui.com/styles/advanced/#next-js

当我们进行静态导出时，预渲染的 html 文件引用的类名与 /_next/ 文件夹中定义的类名不同。

在上面的文档中提到，如果满足三个条件，类名是确定性的（阅读上文）。我的解决方案只是将我的样式表命名为以“Mui”开头的名称。然后类名在预渲染的 html 和 /_next/ 中的 JS 中是相同的。

    const useStyles = makeStyles(theme => (
          {
              ...
          }), 
          {
              name: "MuiCustomStyle"
          });

我确定这不是一个“正确”的解决方案，但它为我解决了这个问题。

如果按照 Material-UI NextJS 示例中的建议修改应用程序没有帮助，您可以延迟加载您的组件。这样，您将仅在加载客户端后强制它创建样式。

为组件禁用 SSR 的指南：https : //nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

import dynamic from 'next/dynamic'

export const ComponentWithNoSSR = dynamic(() => import('./Component'), {
  ssr: false,
})

我遇到过同样的问题。所以这是解决方案

https://codeload.github.com/mui-org/material-ui/tar.gz/master

从那个 URL 材料下载 UI+NextJS 样板代码

下载 tar.gz 文件 > material-ui-master > examples > nextJS