在材质-ui ReactJs中更改FloatingActionButton的背景颜色

Question

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

<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，以便中心属性red background看起来像

浏览FloatingActionButton的文档。我尝试使用

提供样式

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

没有改变

我也试过提供像

这样的内联样式的背景色

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

有了这个，我得到以下显示

我无法弄清楚如何获得理想的结果。任何帮助表示赞赏。

提前致谢

Answer 1

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

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

你可以这样获得颜色：

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