JSS 和 Material-UI 的样式注入顺序在开发和生产之间有所不同
Kor*_*sik 5 material-ui next.js jss
我正在尝试将 Material-UI ( https://material-ui.com/ ) 与 NextJS ( https://nextjs.org/ ) 一起使用，并使用 JSS 解决方案进行样式设置。
它在我的本地环境中运行良好，但我的设计在 prod 上被破坏了。经过快速分析，这似乎是标签的注入顺序的问题<style>：我的样式确实在 MUI 之间注入，取消了我的更改。
开发环境
产品环境
从上面的截图可以看出，产品中的注入顺序是不同的。因此，该Alert样式会因MuiButton使我的页面损坏而被覆盖。
（我也不明白为什么 和Alert的DashboardLayout样式有一个空克隆，但这不是我的主要问题......）
值得注意的是，在服务器端生成的样式是可以的：页面在加载时正确呈现。仅在客户端运行后才会出现此问题。
我的代码基于Material-UI 的这个示例（与 NextJS 一起使用）。
我真的不明白为什么它在开发上没问题，但在产品上却不行（而且我无法使用 NextJS 在本地运行产品构建以方便调试^^'）。
您知道如何理解和调查这个问题吗？
提前致谢 ：）
因此，我也在Material-UI repo上提出了这个问题，维护者为我提供了一些有用的信息。
我错过了调用<styles>时注入的要点：注入顺序与调用order相同。makeStylesmakeStyles
定义我的组件的文件Alert包含在Button组件之前，这就是为什么它的样式在Button. 它破坏了我的设计，但它是合乎逻辑的，并且这种行为是有意的。
它在开发环境中工作的事实对我来说是一个谜......但这是一种错误行为，所以我们必须小心！
为了解决我的问题，我只需要确保 的调用顺序makeStyles是预期的。
| 归档时间： |
|
| 查看次数： |
1524 次 |
| 最近记录： |