Change Background Color of FloatingActionButton in material-ui ReactJs

Question

I have a set of FloatingActionButton that I am using from material-ui in my ReactJS code as

<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> 

The UI currently looks like

I want to apply a backgroundColor property to the FloatingActionButton so that the center one has a red background and looks like

going through the documentation of FloatingActionButton. I tried to provide styles using

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

nothing changed

I also tried providing background color with inline style like

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

With this I get the following display

I can't quite figure out how to get the desired result. Any help is appreciated.

Thanks in advance

Answer 1

To Change the icon background-color, send backgroundColor={red500} as props. Here red500 is desired color. You can also pass string or color code

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

You can get color this way:

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