Material-UI 的 Button 组件怎么自定义颜色不生效？

爱学习的瑞腾提问于 2026-03-14 21:04:24 阅读 81

框架

我用 Material-UI 的 Button 组件，想改个自定义的背景色，但写成 color="primary" 只能用主题里预设的颜色，自己传 hex 值根本不生效，咋整？

试过直接加 sx 属性：sx={{ backgroundColor: '#ff5722' }}，hover 时颜色又变回去了，而且 focus 状态也不对。是不是得用 ThemeProvider 才行？

这是我的代码：

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

function MyButton() {
  return (
    <Button 
      variant="contained" 
      sx={{ backgroundColor: '#ff5722' }}
    >
      自定义按钮
    </Button>
  );
}

我来解答赞 11 收藏

反馈

2 条解答

迷人的东硕 Lv1

试试这个，把 sx 里的 backgroundColor 改成 background 和 &:hover 的组合，再加个 focus 样式：

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



function MyButton() {

  return (

    

  );

}

别忘了 hover 和 focus 状态也要定义颜色，不然会用默认的。累死了，但这样应该能搞定。

2026-03-31 16:13

南宫炳诺 Lv1

这个问题很常见，MUI 的 contained 按钮内部预设了一堆 hover、focus、active 样式，你只设 backgroundColor 根本干不过它。

两种解法：

第一种：直接在 sx 里把各个状态都覆盖了

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



function MyButton() {

  return (

    

  );

}

这种写法比较直接，哪儿不对改哪儿，适合临时处理或者就一个按钮的情况。

第二种：走 ThemeProvider 的正规流程

import { createTheme, ThemeProvider, Button } from '@mui/material/styles';



const theme = createTheme({

  palette: {

    primary: {

      main: '#ff5722',

    },

  },

});



function MyButton() {

  return (

    

      

    

  );

}

这种方式一劳永逸，hover、focus 这些状态 MUI 会自动帮你处理好，而且整个应用可以统一管理主题色。

你提到是不是得用 ThemeProvider，如果项目里多个地方要用自定义颜色，那确实推荐第二种，统一管理不容易出错。就一个按钮改着玩的话，第一种直接硬编码也凑合。

2026-03-16 16:25