如何在反应中更改错误状态下的标签颜色？答案

【问题标题】：How to change label colour in error state in react?如何在反应中更改错误状态下的标签颜色？
【发布时间】：2019-07-23 03:39:10
【问题描述】：

能否请您告诉我如何更改材料中错误状态下的标签颜色和输入字段颜色？

我试过这样

<FormControl>
                  <TextField
                    required
                    error
                    classes={{
                      error: this.props.classes.error

                    }}
                    InputLabelProps={{
                      shrink: true,
                      FormLabelClasses: {
                        asterisk: this.props.classes.labelAsterisk,
                        error: this.props.classes.error

                      }
                    }}
                    id="standard-name"
                    label="Name"
                    margin="normal"
                    helperText="Some important text"
                  />
                </FormControl>

这里是文档 https://material-ui.com/api/input/ 我的代码

https://codesandbox.io/s/007k3v472w

当前处于error 状态，它显示red 标签和输入字段red 边框的颜色。我想要green 标签和绿色border 在输入字段中任何更新

【问题讨论】：

标签： reactjs react-redux material-ui

【解决方案1】：

样式对象中定义的属性规则不会覆盖默认主题中提供的属性规则，因为它们的特异性较低。

一方面，输入标签错误颜色在 CSS 选择器'.root.error' 中给出，忽略了选择器名称中添加的组件前缀。

可以在浏览器的开发者控制台的样式部分中找到用于定位元素的选择器。

这与星号和表单帮助文本错误状态的颜色相同。

要生成类似的选择器，您需要将样式对象编写为：

const styles = {
  root: {
    '&$error': {
      color: "green"
    }
  },
  asterisk: {
    '&$error': {
      color: "green"
    }
  },
  underline: {
    '&$error:after': {
      borderBottomColor: "green",
    }
  },
  error: {
  }
};

在这里，我将 color 从 red 替换为 green。

在TextField 中覆盖InputProps.classes、FormHelperTextProps.classes 和InputLabelProps.FormLabelClasses

const { classes } = this.props 
//...
return (
  <TextField
    //...
    InputProps={{
      classes: {
        root: classes.root,
        error: classes.error,
        underline: classes.underline
      }
    }}
    FormHelperTextProps={{
      classes: {
        root: classes.root,
        error: classes.error
      }
    }}
    InputLabelProps={{
      shrink: true,
      FormLabelClasses: {
        root: classes.root,
        asterisk: classes.asterisk,
        error: classes.error
      }
    }}
    //...
  />
)

【讨论】：