材质UI + Nextjs：抽屉

Question

我在React Nextjs项目中实现Material UI Drawer时遇到问题。

问题是当我在导航器中重新加载页面时，抽屉和应用栏的样式崩溃。当我重新加载服务器时，只有在页面重新加载时才发生这种情况。

目前，我对解决该问题的方法一无所知，而且我也不知道为什么会这样，因为我唯一要做的就是打印并粘贴示例o材质用户界面https://material-ui.com/components/drawers/#drawer在布局组件中，而不在页面中。

Answer 1

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

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

或者，如果需要，您可以检查材料用户界面存储库（查看_app.js和_document.js）

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

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"
          });

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

Answer 3

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

Answer 4

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

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

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

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