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

Question

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

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

开发环境

产品环境

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

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

我的代码基于Material-UI (usage with NextJS) 中的这个示例。

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

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

提前致谢 ：）

标签： material-uinext.jsjss

Answer 1

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

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

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

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

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