无法使用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高阶组件为组件提供将classesJSS中定义的类名映射为其实际名称的prop：

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);

请参阅使用类覆盖以获取更多信息。