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

时间:2018-08-21 16:18:04

标签: reactjs material-ui

我正在使用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

2 个答案:

答案 0 :(得分:0)

解决方案在这里:

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

答案 1 :(得分:0)

事实证明这是设计此道具的解决方案:

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

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

demo