material-ui - 使用 JSS 和 Material-UI 的样式注入(inject)顺序在 dev 和 prod 之间有所不同

Question

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

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

开发环境


产品环境


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

值得注意的是 服务端生成的样式没问题 :页面在加载时正确呈现。仅在客户端运行后才会出现此问题。

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

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

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

提前致谢 :)

Answer 1

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

我错过了的要点<styles>在 makeStyles 时注入(inject)被称为:注入(inject)顺序与调用 makeStyles 相同订购 .

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

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

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