Material UI 在生产中破坏 NextJS 应用程序

Question

我创建了一个 NextJS 应用程序，它使用服务器端渲染和 Material UI。它在开发中运行良好。

当我运行“下一个构建”时，应用程序编译和构建没有错误。当我使用 NODE_ENV=production 运行它时，网页呈现得很好，但许多功能不再起作用。例如：

1. Material UI 的“隐藏”组件从不显示任何嵌套在其中的子组件，即使它应该显示（在我的开发应用程序中，它根据屏幕大小隐藏和显示某些 div）。

2. 网页上的按钮都不起作用。所有这些按钮都有“onClick”事件，其回调函数在点击时以某种方式修改 React 状态对象。但是，单击这些按钮时没有任何反应。状态保持不变，所以我假设当这些点击事件发生时这些函数永远不会被调用。这适用于 Material UI 的 Button 组件以及普通的旧 HTML 按钮（如 JSX）。

当我在笔记本电脑上以开发模式运行它时，一切正常。但是，当我构建 NextJS 应用程序并以生产模式将其部署到服务器时，我遇到了上面列出的问题。到目前为止，我的研究只发现了在构建过程中类名冲突的可能性（这是在 Material UI 的常见问题页面上说的）。有没有人遇到过和我一样的问题？

编辑：我刚刚启动了一个准系统 NextJS 应用程序，它只包含一个索引页和最小的依赖项，一个状态参数和一个通过 onClick 事件修改参数的按钮。我有同样的问题。该按钮在开发中有效，但在生产中无效。所以这将是 NextJS 问题而不是 Material UI 问题。但这仍然不能解释为什么无论屏幕大小如何，Material UI 的“隐藏”组件始终保持隐藏状态。也许这既是 Next JS 又是 Material UI 的问题。

Answer 1

关于第一个问题，因为你打开了ssr，所以素材ui无法判断服务器端的断点。这是一个官方示例\xe3\x80\x82服务器端渲染。您需要根据 UA 标头确定用户设备来确定页面大小调整器。使用匹配来确定需要显示的内容

\n