Вопрос: Изменить цвет спецификации пользовательского интерфейса неопределенного флажка


Мне сложно применить цвет к неопределенному состоянию моих флажков. При полностью выбранном флажке правильно отображается как вторичный цвет. Любые предложения о том, что я делаю неправильно, чтобы настроить неопределенное состояние и изменить его цвет?

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>

enter image description here

Я сделал это так, опираясь на документацию здесь: https://material-ui.com/customization/overrides/#overriding-with-classes

Спасибо за вашу помощь!


5


источник


Ответы:


Я нашел правильный способ реализовать это. Вместо выбора корня и изменения цвета вы указываете флажку, какой значок использовать и применяете класс к значку.

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

      disabled={this.props.disabled}

      checked={this.props.checked}
    />

4