Question

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

我试图将样式设置为有颜色，但它不起作用，我知道有一个checkedIcon属性说它需要一个'元素'，但我不知道如何获得相同形状的盒子从材料和改变颜色。

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

Answer 1

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

Snippet就像跟随

从'react'导入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;

至于改变蜱本身的颜色，我认为还不可能。

你能改变Material-ui中CheckBox的颜色吗？

1 个答案: