What are some effective methods for overriding materialui styles?

Question

Here is the CSS style for a checkbox in Material-UI that I captured from the console:
.MuiCheckbox-colorPrimary-262.MuiCheckbox-checked-260

I attempted to override this style using the following code, but it was unsuccessful:

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

Can anyone offer any assistance?

Answer 1

Answer №1

If you're looking to customize the color of a checked Checkbox, check out how to override styles in material-ui here.

The documentation includes an example of changing the checkbox's color. Take a look at this example.

To do this, create your own styles and apply them to the Checkbox component using the classes property.

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

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

Answer 2

If you're looking to customize the color of a checked Checkbox, check out how to override styles in material-ui here.

The documentation includes an example of changing the checkbox's color. Take a look at this example.

To do this, create your own styles and apply them to the Checkbox component using the classes property.

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

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