Можете ли вы изменить цвет проверенного CheckBox в Material-ui? - PullRequest
Новая
       8

Можете ли вы изменить цвет проверенного CheckBox в Material-ui?

0 голосов
/ 08 мая 2018

http://www.material -ui.com / # / компоненты / Флажок

Я пытался установить стиль, чтобы он имел цвет, но он не работает, и я знаю, что есть свойство checkedIcon, которое говорит, что оно ожидает «элемент», но я не уверен, как получить такой же фасонный блок из материала и изменить цвет.

В идеале я бы мог изменить и цвет фона флажка, и цвет флажка.

1 Ответ

0 голосов
/ 08 мая 2018

Вы можете использовать material-ui v1 и изменять цвета, предоставляя атрибут цвета. Я не могу найти его прямо сейчас, но я помню, что читал где-то в официальной документации, что можно смешивать старую и новую версии.

Фрагмент был бы похож на

импорт React из 'реакции'; Импортировать флажок из 'material-ui / Checkbox'; 

class Checkboxes extends React.Component {
  state = {
    checkedA: true,
    checkedB: true,
    checkedF: true,
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
  };

  render() {
    return (
      <div>
        //this is red
        <Checkbox
          checked={this.state.checkedA}
          onChange={this.handleChange('checkedA')}
          value="checkedA"
        />
        //this is blue
        <Checkbox
          checked={this.state.checkedB}
          onChange={this.handleChange('checkedB')}
          value="checkedB"
          color="primary"
        />
        <Checkbox value="checkedC" />
        <Checkbox disabled value="checkedD" />
        <Checkbox disabled checked value="checkedE" />
        <Checkbox
          checked={this.state.checkedF}
          onChange={this.handleChange('checkedF')}
          value="checkedF"
          indeterminate
        />
        <Checkbox defaultChecked color="default" value="checkedG" />
      </div>
    );
  }
}

export default Checkboxes;

Что касается изменения цвета самой галочки, я не думаю, что это пока возможно.

...