How can I customize the color of a Checkbox in material-ui

kellyxiepei picture kellyxiepei · Dec 26, 2016 · Viewed 35.8k times · Source

I am using material-ui in my project, and I have a Checkbox within a div with a black background. But it doesn't look good because the Checkbox is black too. How can I change the color of the Checkbox from black to another color?

Answer

Jeff McCloud picture Jeff McCloud · Dec 27, 2016

You need to use the iconStyle, but since the checkbox icon is an SVG image, you need to set the color using fill instead of color:

https://jsfiddle.net/27Lmaz48/1/

<Checkbox label='My checkbox' 
  labelStyle={{color: 'white'}}
  iconStyle={{fill: 'white'}}
/>