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

Question

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?

question from:https://stackoverflow.com/questions/41332701/how-can-i-customize-the-color-of-a-checkbox-in-material-ui

Answer 1

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'}}
/>