如何不使用!important通过Sass覆盖MUI组件样式？

问题根源 #

MUI的交互状态（如hover、active）会生成优先级较高的选择器（比如.MuiButton-outlined:hover），即便你用了StyledEngineProvider injectFirst让自定义样式后加载，普通的.go-button选择器优先级仍不足以覆盖这些状态样式。

最优解决方案 #

1. 强化自定义选择器优先级（推荐，适配SCSS工作流） #

在SCSS中为自定义类添加对应交互状态的伪类选择器，让其优先级与MUI的状态选择器匹配，结合injectFirst就能稳定覆盖：

修改你的SCSS代码：

.button {
    width: 250px;
    height: 50px;
    border: 1px solid grey;
    border-radius: 15px;
    text-transform: none;
}

.go-button {
    @extend .button;
    background-color: grey;
    color: whitesmoke;

    // 覆盖hover状态
    &:hover {
        background-color: darkgrey;
        border-color: darkgrey;
        color: whitesmoke;
    }

    // 可选：覆盖其他交互状态，比如active、focus
    &:active {
        background-color: #555;
        border-color: #555;
    }
}

原理：.go-button:hover的优先级和MUI的.MuiButton-outlined:hover一致，而injectFirst确保你的样式在MUI之后加载，所以会生效。

2. 使用MUI内置sx属性（适合快速调整） #

如果是单组件的少量样式，直接用MUI的sx属性写样式及状态，它的优先级天然高于组件默认样式，无需额外配置：

<Button
   variant="outlined"
   onClick={handleClick}
   sx={{
     width: '250px',
     height: '50px',
     border: '1px solid grey',
     borderRadius: '15px',
     textTransform: 'none',
     backgroundColor: 'grey',
     color: 'whitesmoke',
     '&:hover': {
       backgroundColor: 'darkgrey',
       borderColor: 'darkgrey',
       color: 'whitesmoke'
     }
   }}
>
   Go
</Button>

这种方式不需要维护单独的SCSS文件，适合快速迭代的场景。

3. 全局样式限定覆盖（不推荐，依赖MUI类名） #

如果必须用全局样式，可以直接针对MUI的组件类名，但要注意MUI版本更新可能导致类名变化，风险较高：

// 限定在自定义类下，避免全局污染
.go-button.MuiButton-outlined:hover {
    background-color: darkgrey;
    border-color: darkgrey;
    color: whitesmoke;
}

总结 #

优先选择方案1，既符合你现有的SCSS工作流，又能稳定覆盖所有交互状态，且不依赖MUI内部实现细节；如果是零散的样式调整，方案2的sx属性更高效。

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