使用 JSS 和 Material-UI 的样式注入顺序在 dev 和 prod 之间有所不同答案

【问题标题】：Styles injection order with JSS and Material-UI differs between dev and prod使用 JSS 和 Material-UI 的样式注入顺序在 dev 和 prod 之间有所不同
【发布时间】：2020-09-23 22:12:06
【问题描述】：

我正在尝试将 Material-UI (https://material-ui.com/) 与 NextJS (https://nextjs.org/) 一起使用，并使用 JSS 解决方案进行样式设置。

它在我的本地环境中运行良好，但我的设计在 prod 上被破坏了。经过快速分析，这似乎是<style> 标签的注入顺序问题：我的样式确实在 MUI 之间注入，取消了我的更改。

开发环境

产品环境

从上面的截图可以看出，prod 中的注入顺序是不同的。 Alert 样式因此被 MuiButton 覆盖，使我的页面损坏。 （我也不明白为什么 Alert 和 DashboardLayout 的样式有一个空克隆，但这不是我的主要问题......）

值得注意的是，在服务器端生成的样式是正常的：页面在加载时正确呈现。只有在客户端运行后才会出现此问题。

我的代码基于this example from Material-UI (usage with NextJS)。

我真的不明白为什么它可以在 dev 上而不是在 prod 上（而且 我无法使用 NextJS 在本地运行 prod 构建以便于调试^^'）。

您对如何理解和调查此问题有任何想法吗？

提前致谢:)

【问题讨论】：

标签： material-ui next.js jss

【解决方案1】：

所以，我也在the Material-UI repo 上问过这个问题，维护者为我提供了一些有用的信息。

我错过了在调用makeStyles 时注入<styles> 的要点：注入顺序与调用makeStyles 顺序相同。

定义我的Alert 组件的文件包含在Button 组件之前，这就是为什么它的样式在Button 之前注入的原因。 它破坏了我的设计，但这是合乎逻辑的，并且这种行为是有意的。

它在开发环境中工作的事实对我来说是个谜……但这是一种错误的行为，所以我们必须小心！

为了解决我的问题，我只需要确保makeStyles 的调用顺序是有意的。

【讨论】：