Material UI + Nextjs：抽屉

Posted 2023-03-06

【中文标题】Material UI + Nextjs：抽屉

【英文标题】：Material UI + Nextjs: Drawer

【发布时间】：2020-07-07 16:11:21

【问题描述】：

我的 React Nextjs 项目中 Material UI Drawer 的实现存在问题。

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

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

【参考方案1】：

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

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

或者，如果您愿意，您可以查看 material-ui 存储库（查看 _app.js 和 _document.js）

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

【参考方案2】：

我也遇到过这个问题，找到了解决办法。

问题源于 Mui (MakeStyles) 采用您的 CSS 类名称并尝试创建唯一名称以避免冲突。

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

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

在上述文档中提到，如果满足三个条件，类名是确定性的（阅读上文）。我的解决方案只是用“Mui”开头的东西来命名我的样式表。那么在预渲染的 html 和 /_next/ 中的 JS 中的类名是相同的。

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

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

【参考方案3】：

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

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

import dynamic from 'next/dynamic'

export const ComponentWithNos-s-r = dynamic(() => import('./Component'), 
  s-s-r: false,
)

【参考方案4】：

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

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

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

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