Next.js SCSS Modules样式被MUI Material覆盖的优先级问题

开发环境下样式正常，但生产环境中SCSS Modules自定义样式被MUI内置的emotion样式覆盖，且自定义样式排在data-emotion标签样式之后，不想用!important的话，可以用以下几种方法解决：

1. 开启MUI ThemeProvider的injectFirst选项 #

这是最直接的方案，让MUI的样式优先注入到页面头部，之后加载的SCSS Modules样式自然会覆盖它。

在_app.js/_app.tsx中修改ThemeProvider配置：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme();

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme} injectFirst>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

2. 提升SCSS选择器优先级 #

利用CSS权重规则，通过增强选择器的特异性来覆盖MUI样式：

• 结合元素选择器：针对MUI组件对应的HTML标签，把类名和标签结合
  比如Typography的示例：

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

• 重复类名：通过重复类名提升权重

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

• 嵌套父级选择器：如果组件有父容器类，将样式嵌套进去

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

3. 调整Next.js样式加载顺序 #

确保组件的SCSS Modules在MUI组件之后导入。比如在页面组件中：

// 先导入MUI组件
import { Typography, Button } from '@mui/material';
// 再导入SCSS Modules
import styles from './Profile.module.scss';

export default function Profile() {
  return (
    <div className={styles.profileSection}>
      <Typography variant="h5" className={styles.subtitle}>
        Hobbies and interests
      </Typography>
      <Button className={styles.viewButton} variant="contained">
        View gallery
      </Button>
    </div>
  );
}

以上方法都能避免使用!important，确保SCSS Modules样式在生产环境中优先生效。

内容的提问来源于stack exchange，提问作者Felipe Centeno