“更改材质UI颜色不确定”复选框

我很难把颜色应用到我的复选框的不确定状态。当完全选中时,复选框正确地显示为次要颜色。有什么建议,我做错了目标的不确定状态和改变它的颜色?

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>

我这样做是基于这里的文档: https://material-ui.com/customization/overrides/#overriding-with-classes

谢谢你的帮助!