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 prop，映射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。

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

1 个答案: