Reactjs 用 scss 覆盖 MUI

发布于11月03日

我正在做一个使用MUI和Sass的Reaction项目.目前有多个满!important的SCSS文件用sass覆盖MUI样式.为了解决这个问题，我go 掉了!important，并添加了:

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

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

按照这里的建议:Issue with @Mui and modularized SCSS competing intermittently. How to consistently override @mui default styling with SCSS modules?

它一开始似乎起作用，但当你专注于一个组件时就停止工作了.例如，将鼠标悬停在以下位置时，此按钮将变为白色并带有蓝色边框:

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>

我们没有使用模块或Make Styles.在没有!important的情况下，改写MUI的最佳方式是什么？

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

Reactjs 用 scss 覆盖 MUI

推荐答案

Reactjs相关问答推荐

如何使用react-router-dom导航到网页中的其他路由？

有没有方法覆盖NextJS 14中的布局？

Reaction Ploly：如何在多个子情节中共享zoom 状态

用于获取带有事件处理程序的API的动态路由

定位数组中的一项(React、useState)

在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

如何测试根据 prop 更改 CSS 属性的 useEffect 钩子？

如何在 TimePicker 中更改时钟 colored颜色和确定按钮字体 colored颜色 - MUI React

在添加了useplacesautocomplete后，在构建React/Next.js项目时，NPM抛出类型期望的错误

React Router v6 路径中的符号

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用？

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

使用状态与复选框不同步

页面不显示

我如何在所有组件中使用 Chakra UI toast？

如何通过onpress on view in react native flatlist来降低和增加特定视图的高度？

Select 建议后如何关闭 vscode 添加自动完成={}

自动重新获取不起作用 - RTK 查询

使用输入类型文本对 useState 和日期做出react

如何使用react 路由将 url 参数限制为一组特定的值？