reactjsmaterial-ui

How can I customize the color of a Checkbox in Material UI?

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?

Solution

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