更改材质 UI 不确定复选框的颜色答案

【问题标题】：Change color of Material UI Indeterminate Checkbox更改材质 UI 不确定复选框的颜色
【发布时间】：2018-12-01 07:27:50
【问题描述】：

我很难将颜色应用于复选框的不确定状态。完全选中后，复选框会正确显示为辅助颜色。关于我做错了什么来定位不确定状态并更改其颜色的任何建议？

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

感谢您的帮助！

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

我找到了实现这一点的正确方法。您无需选择根并更改颜色，而是告诉 Checkbox 使用什么图标并将类应用于图标。

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

      disabled={this.props.disabled}

      checked={this.props.checked}
    />

【讨论】：