IconButton自定义颜色失效：设置StarBorderRoundedIcon红色未生效求助

为啥红色没生效？ #

MUI的图标组件（比如StarBorderRoundedIcon）的color属性只支持主题预设的取值，比如primary、secondary、error这类，直接传'red'这种颜色字符串不会被识别，所以设置没生效。

几种解决办法 #

方法1：用sx或style直接设颜色 #

最简单的方式就是给图标加内联样式，推荐用MUI的sx属性（能兼容主题样式）：

<IconButton variant='contained'>
  <StarBorderRoundedIcon sx={{ color: 'red' }} />
</IconButton>

也可以用原生style属性：

<IconButton variant='contained'>
  <StarBorderRoundedIcon style={{ color: 'red' }} />
</IconButton>

方法2：自定义主题颜色（适合全局复用） #

如果要在多处用这个红色图标，可以扩展MUI主题，把红色加入主题调色板：

1. 先定义自定义主题：

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

const customTheme = createTheme({
  palette: {
    customRed: {
      main: '#ff0000', // 也可以用其他红色值，比如'red'或'rgb(255,0,0)'
    },
  },
});

2. 用主题包裹组件后使用：

<ThemeProvider theme={customTheme}>
  <IconButton variant='contained'>
    <StarBorderRoundedIcon color='customRed' />
  </IconButton>
</ThemeProvider>

方法3：用CSS类自定义样式 #

如果习惯写CSS，给图标加个类名就行：

.custom-red-icon {
  color: red !important;
}

<IconButton variant='contained'>
  <StarBorderRoundedIcon className='custom-red-icon' />
</IconButton>

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