reactjs - 在 material-ui ReactJs 中更改 FloatingActionButton 的背景颜色

Question

我有一组 FloatingActionButton，我在我的 ReactJS 代码中使用 material-ui 作为

<div className="callActionButtons">
  <FloatingActionButton style={{padding: '5px'}}>
    <VoiceSettingsIcon/>
  </FloatingActionButton>
  <FloatingActionButton style={{padding: '5px'}} onTouchTap={this.endCall}>
    <CallEndIcon  />
  </FloatingActionButton>
  <FloatingActionButton style={{padding: '5px'}}>
    <VideoIcon/>
  </FloatingActionButton>
</div> 

UI 目前的样子

我想将 backgroundColor 属性应用到 FloatingActionButton 以便中间的那个有一个红色背景并且看起来像

查看 FloatingActionButton 的文档.我尝试使用

提供样式

<FloatingActionButton style={{padding: '5px'}} 
         iconStyles={{backgroundColor: 'red'}} 
         onTouchTap={this.endCall}>

没有改变

我也试过用内联样式提供背景颜色，比如

   <FloatingActionButton style={{padding: '5px', backgroundColor: 'red'}} 
         onTouchTap={this.endCall}>

有了这个我得到以下显示

我不太清楚如何获得所需的结果。任何帮助表示赞赏。

提前致谢

Answer 1

要更改图标背景色，请发送 backgroundColor={red500} 作为 Prop 。这里 red500 是所需的颜色。您还可以传递字符串或颜色代码

<FloatingActionButton style={{padding: '5px'}} backgroundColor={red500}
    onTouchTap={this.endCall}>
     <CallEndIcon  />
</FloatingActionButton>

你可以这样得到颜色:

 import {red500} from 'material-ui/styles/colors'