使用CSS/SCSS能否覆盖Material UI组件的原有样式？

问题根因 #

你的写法不生效存在两个核心问题：

• 选择器逻辑错误：你给Button组件传入的styles.button和MUI自带的MuiButton-containedPrimary是挂载在同一个DOM元素上的类，你写的后代选择器.button .MuiButton-containedPrimary是匹配.button子元素上的MUI类，永远匹配不到目标元素
• SCSS模块默认会对所有类名做局部作用域编译，你直接写的.MuiButton-containedPrimary会被编译为带哈希后缀的局部类名，和DOM上全局的MUI类名不匹配

解决方案 #

第一步：修正SCSS写法

使用:global()标记MUI的全局类名，避免被SCSS模块编译，同时用&父选择器拼接，匹配同一元素上同时存在两个类的场景：

.button {
  padding: 10px;
  margin-bottom: 10px;
  &:global(.MuiButton-containedPrimary) {
    border: 2px solid red;
    background-color: red;
  }
}

第二步（可选，优先级不足时配置）：调整MUI样式注入顺序

在Next.js项目的根组件_app.jsx/_app.tsx中配置MUI的StylesProvider，开启injectFirst参数，让MUI默认样式优先注入，后续你的自定义SCSS样式后注入，自动获得更高优先级：

import { StylesProvider } from '@material-ui/core/styles';

export default function MyApp({ Component, pageProps }) {
  return (
    <StylesProvider injectFirst>
      <Component {...pageProps} />
    </StylesProvider>
  )
}

如果配置后仍然存在样式被覆盖的情况，可以在样式属性后加!important强制提升优先级，或者给选择器额外增加层级权重即可。

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