使用 JSS 和 Material-UI 的样式注入顺序在 dev 和 prod 之间不同
Styles injection order with JSS and Material-UI differs between dev and prod
我正在尝试使用 Material-UI (https://material-ui.com/) with NextJS (https://nextjs.org/)，使用 JSS 解决方案进行样式设置。
它在我的本地环境中运行良好，但我的设计在生产环境中出现问题。经过快速分析，这似乎是 标签的注入顺序 的问题：我的样式确实在 MUI 个之间注入，取消了我的样式变化。
开发环境
生产环境
从上面的截图可以看出，prod中的注入顺序是不一样的。 Alert 样式因此被 MuiButton 覆盖，使我的页面损坏。
（我也不明白为什么 Alert 和 DashboardLayout 的样式有一个空的克隆，但这不是我的主要问题...）
可能值得注意的是，在服务器端生成的 样式是正确的 ：页面在加载时正确呈现。只有在客户端 运行.
之后才会出现此问题
我的代码基于this example from Material-UI (usage with NextJS)。
我真的不明白为什么它在开发上是好的，而不是在产品上（而且 我不使用 NextJS 来管理 运行 在本地构建产品以便于调试 ^ ^').
您知道如何理解和调查这个问题吗？
提前致谢:)
所以，我也在 the Material-UI repo 上问过这个问题，维护者为我提供了一些有用的信息。
我错过的要点是 <styles> 在调用 makeStyles 时被注入：注入顺序与调用 makeStyles 顺序相同.
定义我的 Alert 组件的文件包含在 Button 组件之前，这就是为什么它的样式在 Button 的样式之前注入的原因。 它打破了我的设计，但这是合乎逻辑的，并且这种行为是有意的。
它能在开发环境中工作的事实对我来说是个谜...但这是一个错误的行为，所以我们必须谨慎！
为了解决我的问题，我只需要确保 makeStyles 的调用顺序是预期的。
我正在尝试使用 Material-UI (https://material-ui.com/) with NextJS (https://nextjs.org/)，使用 JSS 解决方案进行样式设置。
它在我的本地环境中运行良好，但我的设计在生产环境中出现问题。经过快速分析，这似乎是 标签的注入顺序 的问题：我的样式确实在 MUI 个之间注入，取消了我的样式变化。
开发环境
生产环境
从上面的截图可以看出，prod中的注入顺序是不一样的。 Alert 样式因此被 MuiButton 覆盖，使我的页面损坏。
（我也不明白为什么 Alert 和 DashboardLayout 的样式有一个空的克隆，但这不是我的主要问题...）
可能值得注意的是，在服务器端生成的 样式是正确的 ：页面在加载时正确呈现。只有在客户端 运行.
之后才会出现此问题我的代码基于this example from Material-UI (usage with NextJS)。
我真的不明白为什么它在开发上是好的，而不是在产品上（而且 我不使用 NextJS 来管理 运行 在本地构建产品以便于调试 ^ ^').
您知道如何理解和调查这个问题吗？
提前致谢:)
所以，我也在 the Material-UI repo 上问过这个问题，维护者为我提供了一些有用的信息。
我错过的要点是 <styles> 在调用 makeStyles 时被注入：注入顺序与调用 makeStyles 顺序相同.
定义我的 Alert 组件的文件包含在 Button 组件之前，这就是为什么它的样式在 Button 的样式之前注入的原因。 它打破了我的设计，但这是合乎逻辑的，并且这种行为是有意的。
它能在开发环境中工作的事实对我来说是个谜...但这是一个错误的行为，所以我们必须谨慎！
为了解决我的问题，我只需要确保 makeStyles 的调用顺序是预期的。