Next.js 模块样式被 mui/material 样式覆盖

Question

我目前正在使用 next.js 和 scss 模块进行样式设置。我遇到了一个关于 mui/material 组件的有趣的小问题。运行 dev (npm run dev) 时，一切都按预期工作。当我在生产中运行这个时，乐趣就开始了，我的风格被我认为来自 mui/material 的情感风格组件覆盖（我不直接使用情感库）。我的样式显示在另一个来自 html 样式数据情感标签的类下方。现在我知道了这一点，我可以通过在我的样式中添加 !important 来修复样式，但老实说，我不太喜欢这样。有没有办法强制我的 scss 模块样式始终优先？特别是用于生产？

为了澄清，我只是想添加边距，并在另一个实例中更改按钮的颜色。这是我的例子： 网页：

<Typography variant="h5" className={styles.subtitle}>
  Hobbies and interests
</Typography>

SCSS：

.subtitle {
  margin-top: 5rem;
  margin-bottom: 2rem;
  color: gray;
}

对于按钮：

HTML：

<Button
  className={styles.viewButton}
  variant="contained"
  >
  View gallery
</Button>

SCSS：

.viewButton {
  margin-top: 5px;
  margin-left: auto;
  display: block;
}

Answer 1

CSS 注入顺序导致了您遇到的问题。在开发中，样式的注入顺序与组件的安装顺序相同。然而，在生产中，样式会自动提取并注入到 head 元素的顶部，这可能会导致样式被意外覆盖。

Material-UI 使用 CSS-in-JS 技术（v5 中的情感，v4 中的 JSS），该技术在 head 元素的底部注入样式，并优先于 CSS 模块样式。

我建议创建一个 Material UI 主题：

使用createTheme 创建Material-UI 主题。 为组件设置disableServerRender: true以避免服务器端渲染。

使用 ThemeProvider 包装应用程序：

从 Material-UI 导入 ThemeProvider。 使用 ThemeProvider 包装您的 Next.js 应用程序并传递生成的主题。