CSS 模块类适用于开发，但在生产中被覆盖

Question

我的项目中的所有样式都是在 css 模块内定义的，直到最近我才注意到，在 Nextjs 生成的生产版本中，其中一些样式被其他样式覆盖（这只有在它们定义在同一模块上时才有意义） ，但事实并非如此）。这在生产中破坏了我的应用程序，但在开发中一切似乎都运行良好。

这是一个例子：

///mobile.module.css
 .expandIcon {
    width: 12px;
}

///mobile.tsx
import React from "react";
import styles from "./mobile.module.css";
import { NextPage } from "next";
import OpenInFullRoundedIcon from "@mui/icons-material/OpenInFullRounded";

const mobile: NextPage = () => {
  return <OpenInFullRoundedIcon className={styles.expandIcon} />
};

export default mobile;

以下是开发时加载此类的方式：

这是它在产品上被覆盖的方式：

更糟糕的是，我的项目中甚至没有定义覆盖我的类。 我对 NextJs 有点陌生，所以我将不胜感激有关此问题的任何见解。

Answer 1

因此，正如 ali.zabetpour 所指出的，问题与构建后某些外部库的样式如何优先于自定义样式有关，在本例中为 Material ui/Mui。 这是 Mui 文档的链接，详细解释了这一点，并提供了使用他们的 StyledEngineProvider 组件的解决方案，这解决了我的问题： https://mui.com/material-ui/guides/interoperability/#css-injection-order-3