Change color of Material UI Indeterminate Checkbox

Question

I'm having a hard time applying a color to the indeterminate state of my checkboxes. When fully selected, the checkbox properly displays as the secondary color. Any suggestions on what I'm doing wrong to target the indeterminate state and change its color?

const styles = {
 root: {
  '&$indeterminate': {
    color: 'red',
   },
 },
 indeterminate: {},
};

...

<ListItem
  dense
  button
  key={this.props.key}
  className={this.props.className}

  disabled={this.props.disabled}
  onClick={this.props.onClick}
>
  <Checkbox
    indeterminate={this.props.indeterminate}
    classes={{
       root: classes.root,
       indeterminate: classes.indeterminate,
     }}
    disableRipple
    tabIndex={-1}

    disabled={this.props.disabled}

    checked={this.props.checked}
   />
   <ListItemText inset primary={this.props.text} />

  { hasChildren ? <ExpansionIcon onClick={this.onExpansionItemClick} /> : null }
</ListItem>

I did it this way based on the documentation here: https://material-ui.com/customization/overrides/#overriding-with-classes

Thanks for your help!

Answer 1

I've found the proper way to implement this. Instead of selecting the root and changing the color, you tell the Checkbox what icon to use and apply a class to the icon.

    <Checkbox
      indeterminate={this.props.indeterminate}
      indeterminateIcon={<IndeterminateCheckBoxIcon className={classes.root} />}
      disableRipple
      tabIndex={-1}

      disabled={this.props.disabled}

      checked={this.props.checked}
    />