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

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}
    />