更改"材质"界面"不确定"复选框的颜色

Question

我很难将颜色应用到我的复选框的不确定状态.完全选中后,复选框会正确显示为辅助颜色.有什么建议我做错了什么来定位不确定状态并改变它的颜色？

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

谢谢你的帮助!

Answer 1

我找到了实现此目标的正确方法。无需选择根目录并更改颜色，而是告诉Checkbox使用哪个图标，然后将一个类应用于该图标。

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

      disabled={this.props.disabled}

      checked={this.props.checked}
    />