无法通过自定义CSS覆盖Material UI默认样式，恳请技术指导

问题根源 #

Material UI组件会自动生成自带的CSS类（比如MuiButton-contained这类），这些类的样式优先级通常高于你自定义的普通类，导致你的CSS规则无法生效。

可行解决方案 #

1. 提升自定义CSS选择器优先级 #

通过更具体的选择器提高样式权重，比如结合父容器类名或Material UI默认类名：

/* 结合父容器类名增强特异性 */
.stream_container .config_button {
  color: black;
  background-color: yellow;
  border-radius: 10px;
  margin-top: 10px;
}

/* 或者直接关联Material UI的默认按钮类 */
.config_button.MuiButton-contained {
  color: black;
  background-color: yellow;
  border-radius: 10px;
  margin-top: 10px;
}

注：尽量避免滥用!important，仅在紧急情况下临时使用

2. 使用Material UI内置的sx属性（推荐） #

直接在组件上通过sx属性编写样式，它的优先级高于组件默认样式：

import { Button } from "@mui/material";
const StreamDashboard = () => {
  return (
    <div className="stream_container">
      <Button 
        variant="contained"
        sx={{
          color: 'black',
          backgroundColor: 'yellow',
          borderRadius: '10px',
          marginTop: '10px'
        }}
      >
        Edit Config
      </Button>
    </div>
  );
};

export default StreamDashboard;

3. 使用Material UI的styled API复用样式 #

如果需要在多个组件中复用自定义样式，用styled创建封装好的自定义组件：

import { styled } from "@mui/material/styles";
import { Button } from "@mui/material";

const ConfigButton = styled(Button)(({ theme }) => ({
  color: 'black',
  backgroundColor: 'yellow',
  borderRadius: '10px',
  marginTop: '10px',
  '&:hover': {
    backgroundColor: '#ffd700', // 可自定义hover状态样式
  }
}));

const StreamDashboard = () => {
  return (
    <div className="stream_container">
      <ConfigButton variant="contained">
        Edit Config
      </ConfigButton>
    </div>
  );
};

export default StreamDashboard;

4. 检查CSS导入顺序 #

确保你的自定义CSS文件在Material UI相关样式之后导入（全局样式场景下），不过组件内局部导入时这个方法作用有限，可作为辅助排查项。

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