您可以更改 Material-ui 中选中 CheckBox 的颜色吗？

Question

http://www.material-ui.com/#/components/checkbox

我尝试将样式设置为具有颜色但不起作用，并且我知道有一个 checkedIcon 属性表示它需要一个“元素”但我不确定如何获得相同形状的框从材料和改变颜色。

理想情况下，我可以同时更改复选框背景颜色和复选标记的颜色。

Answer 1

您可以使用material-ui v1 并通过提供颜色属性来更改颜色。我现在找不到它，但我记得在官方文档的某个地方读过，可以混合旧版本和新版本。

片段会如下所示

从“反应”导入反应； 从“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;

至于改变刻度本身的颜色，我认为目前还不可能。