Material-UI按钮自定义样式被覆盖怎么办？

Top丶柯佳提问于 2026-02-04 18:47:28 阅读 52

框架

在用Material-UI的Button组件时，给按钮加了自定义CSS类，但样式总是被覆盖。比如设置红色背景颜色完全没效果，这是为什么啊？

我尝试过这样写：


import { Button } from '@mui/material';

function CustomButton() {
  return <Button className="custom-btn">Click Me</Button>;
}

对应的CSS是这样的：


.custom-btn {
  background-color: red !important;
  color: white;
  border-radius: 20px;
}

但按钮还是保持默认的蓝色，检查元素发现我的样式被标记为无效。试过直接用内联style属性倒是有效，但这样写起来太麻烦了…

React生态

我来解答赞 6 收藏

反馈

2 条解答

百里诗晴 Lv1

这个问题很常见，主要是因为Material-UI的Button组件内部样式优先级太高，普通的CSS类根本顶不住。你加了!important都无效，说明你已经试过常规操作了，但问题出在CSS作用域和加载顺序上。

试试这个方法：用MUI推荐的方案，别直接写全局CSS。可以用styled工具来包装Button，这样样式不会被覆盖。

import { Button } from '@mui/material';

import { styled } from '@mui/material/styles';



const CustomButton = styled(Button)(({ theme }) => ({

  backgroundColor: 'red',

  color: 'white',

  borderRadius: '20px',

  '&:hover': {

    backgroundColor: '#cc0000',

  },

}));

然后你在组件里直接用：

function App() {

  return <CustomButton>Click Me</CustomButton>;

}

这样写的样式会生成一个高优先级的class，不会被MUI默认样式干掉。而且支持主题和响应式，后续维护也方便。

如果你非得用className，那至少得配合MUI的sx属性或者把CSS放到主题里，否则永远会被覆盖。说白了，MUI这套东西就是不让你随便改，得按它的路子来。

2026-02-09 11:18

司空彤彤 Lv1

Material-UI 的按钮样式覆盖确实容易翻车。你加了 !important 还没效果，说明你还没踩到点上。

问题出在 MUI 的按钮默认样式优先级比普通的类名高，而且 MUI 默认用的是 CSS-in-JS 渲染出来的样式，普通的 CSS 文件很容易被覆盖掉。

正确的做法有两种：

**第一种：使用 MUI 的 styled API**

import { Button, styled } from '@mui/material';



const CustomButton = styled(Button)({

  backgroundColor: 'red',

  color: 'white',

  borderRadius: 20,

  '&:hover': {

    backgroundColor: 'darkred',

  },

});



export default function App() {

  return <CustomButton>Click Me</CustomButton>;

}

这种写法是官方推荐的，样式优先级够高，不会被覆盖。

**第二种：在 MUI 组件上加 sx 属性**

import { Button } from '@mui/material';



export default function App() {

  return (

    <Button

      sx={{

        backgroundColor: 'red',

        color: 'white',

        borderRadius: 20,

        '&:hover': {

          backgroundColor: 'darkred',

        },

      }}

    >

      Click Me

    </Button>

  );

}

这种方式更灵活，不需要额外创建组件，适合临时改一两个样式。

如果你非要用外部 CSS 文件，也不是不行，但你得用更狠的手段：

**加上 !important 并且确保你的 CSS 文件加载在 MUI 样式之后**。比如用全局样式或者用插件可以控制加载顺序。

总之，推荐优先用 styled 或 sx，这才是 MUI 的现代玩法。

2026-02-04 19:08