How to override this materialui style

2
votes

This is css style which material-ui is having for a checkbox which i captured from console
.MuiCheckbox-colorPrimary-262.MuiCheckbox-checked-260

When I tried to override this style is how i have tried overriding but it's not working

MuiCheckBox: {
    colorPrimary: {
      MuiCheckBox: {
        checked: {
          color:'#1565c0',
        }
      }
    }

Any help?

1
cssreactjsmaterial-ui

1 Answers

2
votes

I assume that you want to override the checked color of Checkbox. Have a look at overriding styles in material-ui here.

Documentation already provided an example of changing checkbox color. Have a look at this example.

Create styles and apply the styles to Checkbox using classes property.

const styles={
  root:{
    '&$checked':{
      color: '#1565c0',
    }
  },
  checked:{}
}

<Checkbox
          classes={{
                root:classes.root,
                checked:classes.checked}}
                {...props}/>