reactjs 更改图标按钮颜色

isr3a4wc 于 2023-01-25 发布在 React

关注(0)|答案(2)|浏览(202)

我想为IconButton添加自定义颜色

<IconButton variant='contained'>
        <StarBorderRoundedIcon color='red' />
      </IconButton>

这是输出

红色不起作用。

2条答案

<IconButton variant='contained' style="background-color: red">
  <StarBorderRoundedIcon/>
</IconButton>

此处图标上的Color属性指的是主题颜色属性，因此您可以将颜色定义为primary,success,action..。您可以使用style属性，如下所示

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

工作demo
也可以使用sx属性

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