React如何在Material-UI中有条件地覆盖TextField错误颜色?

问题描述

我正在使用React Material-UI库，我想有条件地覆盖TextField的错误颜色.

I'm using React Material-UI library and I want to conditionally override the error color of a TextField.

当错误属于某种类型时，我需要将helperText，边框，文本和所需的标记颜色更改为黄色.像这样的东西:

I need to change the helperText, border, text and required marker color to yellow when the error is of a certain type. Something like that :

否则，我想为所有其他类型的错误保留默认颜色(红色).我尝试遵循此 codesandbox 中使用的相同原则，但我无法掌握所有我需要更改的组件，并且几乎每次都必须使用important关键字才能看到差异.

Otherwise, I want to keep the default color(red) for every other type of error.I tried to follow the same principle used in this codesandbox but I couldn't get a grip of all the components that I needed to change and I had to use the important keyword almost every time to see a difference.

我设法有条件地更改了helperText的颜色，如下所示:

I have managed to conditionally change the color of the helperText like so :

                        <TextField
                            label="Name"
                            className={formClasses.textField}
                            margin="normal"
                            variant="outlined"
                            required
                            error={!!errors}
                            helperText={errors && "Incorrect entry."}
                            FormHelperTextProps={{classes: {root: getColorType(AnErrorType)}}}
                        />

getColorType将返回一个CSS对象，其颜色设置为与给定错误类型相对应的颜色.例如:

The getColorType will return a CSS object with the property color set to the one that corresponds the given error type. ex:

hardRequiredHintText: {
    color: `${theme.palette.warning.light} !important`
},

是否有更简便的方法来覆盖MUI错误颜色，并在使用它的所有组件中看到它?

Is there an easier way to override MUI error color and to see it reflected in all the component that uses it?

推荐答案

对于每种类型的验证，显示不同的颜色，我们可以将参数传递给makeStyles

For each type of validation, display a different color, we can pass params to makeStyles

import { makeStyles } from "@material-ui/core/styles";
const useStyles = params =>
  makeStyles(theme => ({
    root: {
    }
  }));
const Component = () => {
  const classes = useStyles(someParams)();

---

---

完整代码:

import React from "react";
import "./styles.css";
import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = value =>
  makeStyles(theme => ({
    root: {
      "& .Mui-error": {
        color: acquireValidationColor(value)
      },
      "& .MuiFormHelperText-root": {
        color: acquireValidationColor(value)
      }
    }
  }));

const acquireValidationColor = message => {
  switch (message) {
    case "Incorrect entry":
      return "green";
    case "Please input":
      return "orange";
    default:
      return "black";
  }
};

const ValidationTextField = ({ helperText }) => {
  const classes = useStyles(helperText)();
  return (
    <TextField
      label="Name"
      margin="normal"
      variant="outlined"
      required
      error={helperText !== ""}
      helperText={helperText}
      className={classes.root}
    />
  );
};

export default function App() {
  const data = ["Incorrect entry", "Please input", ""];
  return (
    <div className="App">
      {data.map((x, idx) => (
        <ValidationTextField helperText={x} key={idx} />
      ))}
    </div>
  );
}

这篇关于React如何在Material-UI中有条件地覆盖TextField错误颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！