reactjs - 如何在 React Material-UI 中覆盖 FormHelperText 样式？

Question

我正在使用 React Material-UI库并且不明白如何覆盖 FormHelperText 样式？

const { classes } = this.props
...
<TextField
  name='username'
  label='Username'
  error={this.state.usernameInvalid}
  helperText={this.state.usernameError}
  classes={{
    root: classes.textField,
    FormHelperText: classes.helperText // <-- how to override by right way?
  }}
  onChange={this.handleInputChange}
/>
...
export default withStyles(styles)(SignInPopup)

样式:

const styles = () => ({
  textField: {
    width: '100%'
  },
  helperText: {
    position: 'absolute',
    bottom: '-50%'
  }
})

我遇到了这个错误:

Warning: Material-UI: the key `FormHelperText` provided to the classes property is not implemented in FormControl.
You can only override one of the following: root,marginNormal,marginDense,fullWidth

Answer 1

解决方法在这里:

<TextField
  name='username'
  label='Username'
  className={classes.textField}
  error={this.state.usernameInvalid}
  helperText={this.state.usernameError}
  FormHelperTextProps={{ classes: { root: classes.helperText } }} // <- smth like that
  onChange={this.handleInputChange}
/>