如何在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

- Daryn K.

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}
/>

- Daryn K.

Answer 2

这个方法可以解决样式问题:

const styles = {
    helper: {
         color: 'blue',
         fontSize: '.8em',
    }
}

return(
   <TextField
     ...
     FormHelperTextProps={{ style: styles.helper }}
   />
);

- Luis Febro

Answer 3

我的解决方案是添加样式： FormHelperTextProps={{ style: { color: theme.palette.metalgrey.main } }}

- Bryan Overbey