Material UI + Nextjs: 抽屉式导航栏

Question

我在我的React Nextjs项目中实现Material UI抽屉时遇到了问题。

问题是当我在浏览器中重新加载页面时，抽屉和应用栏的样式崩溃。这种情况仅在页面重新加载时发生，而不是在服务器重新加载时发生。

目前我不知道该尝试什么来解决这个问题，也不知道为什么会发生这种情况，因为我所做的唯一一件事就是在一个布局组件中打印并粘贴Material UI示例https://material-ui.com/components/drawers/#drawer，而不是在页面中。

- SOLUTRAFFIC DEVELOPER

Answer 1

由于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。

- Alessio Marchi

Answer 2

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

问题源于Mui(MakeStyles)会获取你的CSS类名并尝试创建唯一的名称以避免冲突。

你可以在这里阅读更多信息：https://material-ui.com/styles/advanced/#next-js 当我们进行静态导出时，预渲染的HTML文件引用的类名与/_next/文件夹中定义的类名不同。

如上述文档所述，如果满足三个条件，类名就是确定性的(请参阅上文)。我的解决方案只是将我的样式表命名为以“Mui”开头的名称。然后，在预渲染的HTML和/_next/文件夹中的JS中，类名是相同的。

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

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

- Stericson

---

如果名称必须以 Mui 开头，那么每个组件是否应该有不同的名称，例如 MuiStyleFooter 和 MuiStyleHeader？ - Dijiflex

Answer 3

我也遇到了同样的问题。这是解决方案。

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

从该URL下载Material UI+NextJS样板代码

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

- Chandra sekhar Rachapudi

Answer 4

如果按照 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,
})

- zilijonas