如何修改MUI Chip组件filled状态下的背景颜色？

方法1：用sx属性快速改单个组件 #

如果只是要调整某一个Chip的样式，直接用sx属性最省事，不用折腾全局配置：

import Chip from '@mui/material/Chip';

<Chip
  label="自定义背景"
  variant="filled"
  sx={{
    backgroundColor: '#2196f3', // 换成你需要的颜色，支持十六进制、rgb、rgba格式
    '&:hover': {
      backgroundColor: '#1976d2' // 可选，自定义鼠标悬停时的背景色
    }
  }}
/>

sx是MUI专门用于快速自定义组件样式的属性，直接指定backgroundColor就能覆盖filled Chip默认的浅灰色。

方法2：全局统一修改（适合全项目风格统一） #

要是整个项目里的filled Chip都需要换背景色，直接修改MUI主题更高效：

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

const customTheme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        filled: {
          backgroundColor: '#4caf50',
          '&:hover': {
            backgroundColor: '#388e3c'
          }
        }
      }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Chip label="全局统一样式" variant="filled" />
      {/* 其他所有filled变体的Chip都会自动应用这个背景色 */}
    </ThemeProvider>
  );
}

通过styleOverrides指定MuiChip的filled类样式，所有在ThemeProvider包裹下的filled Chip都会生效，不用逐个组件修改。

方法3：用CSS类管理样式（适合习惯传统CSS的场景） #

如果偏好把样式写在单独的CSS文件里，给Chip加个自定义className，然后在CSS中覆盖默认样式：

// 组件代码
import Chip from '@mui/material/Chip';
import './chip-styles.css';

<Chip label="CSS类自定义" variant="filled" className="my-filled-chip" />

/* chip-styles.css */
.my-filled-chip.MuiChip-filled {
  background-color: #ff9800;
}

.my-filled-chip.MuiChip-filled:hover {
  background-color: #f57c00;
}

MUI的filled Chip自带MuiChip-filled类，将自定义className和这个类组合，就能精准定位目标样式并修改。

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