用scss覆盖MUI

Question

我正在开发一个使用MUI和Sass的React项目。目前有多个scss文件装满了!important，用sass覆盖MUI样式.我试图通过删除!important并添加：

import { StyledEngineProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline'

<CssBaseline />
<StyledEngineProvider injectFirst>
*** component tree here ***
</StyledEngineProvider>

如下所示：发布@Mui和模块化scss间歇性竞争。如何一致地用scss模块覆盖@mui默认样式？

它一开始似乎有效，但当您专注于组件时，它就停止工作了。例如，当这个按钮悬停在上面时，它会变成白色的蓝色边框：

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;
}

反应

<Button
   className="go-button"
   variant="outlined"
   onClick={handleClick}
>
   Go
</Button>

我们不使用模块或makeStyles。在没有!important的情况下，覆盖MUI的最好方法是什么？

Answer 1

许多MUI组件的默认样式将包括一些特定状态的样式，如:hover、.Mui-focused，这些状态的特异性要高于默认状态的样式。当覆盖这些样式时，您需要使用相同的专用性。

例如，Button有特定于悬停的默认样式，所以您需要为悬停状态指定样式重写。

例如，这里有一种可能的方法来定义按钮样式：

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

.go-button {
  @extend .button;
  background-color: grey;
  color: whitesmoke;
}
.go-button:hover {
  @extend .go-button;
  background-color: #999;
}

​

​

Answer 2

根据我的知识经验，您必须使用带有MUI的样式组件，因为它们有更好的对而不是SCSS，有了更好的对，您可以更好地使用网站的性能&使用样式组件，您可以轻松修改MUI的更改。

请访问此链接以了解高级用法。