Question

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

我尝试过这样

<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领域任何更新

Answer 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
      }
    }}
    //...
  />
)

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

1 个答案: