material-ui - 无法使用 material-ui 中的类覆盖样式

Question

我花了很长时间试图了解如何更改样式以一次性使用 TextField

这些文档对我来说真的没有任何意义

<FormControl>
  <InputLabel
    htmlFor="mobile-number-input"
  >
    Mobile Number
  </InputLabel>
  <Input
    value={this.state.mobileNumber}
    onChange={this.onMobileNumberChange}
    fullWidth
    classes={{
      inkbar: {
        '&:after': {
          backgroundColor: 'white',
        }
      }
    }}
    id="mobile-number-input"
  />
</FormControl><br />

但我得到了这个错误

Warning: Material-UI: the key `inkbar` provided to the classes property is not valid for Input.
You need to provide a non empty string instead of: [object Object].

Answer 1

您需要用另一个类的名称覆盖 inkbar，而不是 JSS 对象。

这样做的一种方法是在组件外部声明您的 JSS 对象并使用 withStyles 高阶组件为您的组件提供映射的 classes 属性将 JSS 中定义的类名改为它们的实际名称:

import { withStyles } from 'material-ui/styles';

const styles = {
  inkbarOverride: {
    '&:after': {
      backgroundColor: 'white',
    }
  }
};

const Test = ({ classes }) =>
  <FormControl>
    <InputLabel
      htmlFor="mobile-number-input"
    >
      Mobile Number
    </InputLabel>
    <Input
      value={this.state.mobileNumber}
      onChange={this.onMobileNumberChange}
      fullWidth
      classes={{
        inkbar: classes.inkbarOverride,
      }}
      id="mobile-number-input"
    />
  </FormControl>

export default withStyles(styles)(Test);

请参阅 Overriding with classes了解更多信息。