Material-UI Switch组件自定义classes提示checked属性无效问题求助

你遇到这个报错的原因很明确：你参考的是Material UI较新版本的文档，但实际使用的是1.0.0-beta.41这个早期beta版本——在这个旧版本里，Switch组件的classes属性并不支持checked这个键，所以才会抛出"the key checked provided to the classes property is not valid for Switch"的错误。

在1.0.0-beta.41中，要自定义Switch的选中状态样式，需要通过switchBase这个classes键结合选中状态类来实现，具体步骤如下：

1. 定义样式规则 #

在你的样式对象里，通过switchBase来关联选中状态的样式，同时需要声明一个空的checked类（Material UI会用这个类来标记选中的Switch）：

const styles = theme => ({
  switchBase: {
    // 自定义选中时的滑块颜色
    '&$checked': {
      color: '#2ecc71',
    },
    // 自定义选中时的轨道颜色
    '&$checked + $bar': {
      backgroundColor: '#2ecc71',
    },
  },
  // 必须声明这个类，用于和switchBase的选中样式关联
  checked: {},
  // 自定义轨道的默认样式
  bar: {
    backgroundColor: '#bdc3c7',
  },
});

2. 在Switch组件中应用样式 #

把定义好的类传入Switch的classes属性中：

<Switch
  checked={this.state.checkedF}
  onChange={this.handleChange('checkedF')}
  value="checkedF"
  classes={{
    switchBase: classes.switchBase,
    checked: classes.checked,
    bar: classes.bar,
  }}
/>

额外说明 #

如果你后续想简化这个写法，可以考虑升级Material UI到稳定版本（比如v1.x的正式版或更高），在新版本中Switch组件的classes已经支持checked键，就能直接按照你参考的文档写法来实现了。

内容的提问来源于stack exchange，提问作者CoderX