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

Question

我material-ui在 ReactJS 代码中使用了一组 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> 

用户界面目前看起来像

我想将一个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'