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

Question

我正在使用React Material-UI库，并且想有条件地覆盖文本字段的错误颜色。当错误属于某种类型时，我需要将 helperText、边框、文本和所需标记颜色更改为黄色。像这样的东西：否则，我想为所有其他类型的错误保留默认颜色（红色）。我尝试遵循此codesandbox中使用的相同原则，但我无法掌握需要更改的所有组件，并且important几乎每次都必须使用关键字才能看到差异。我已经设法有条件地改变类似的颜色helperText：                       <TextField                            label="Name"                            className={formClasses.textField}                            margin="normal"                            variant="outlined"                            required                            error={!!errors}                            helperText={errors && "Incorrect entry."}                            FormHelperTextProps={{classes: {root: getColorType(AnErrorType)}}}                        />将getColorType返回一个 CSS 对象，其属性 color 设置为与给定错误类型相对应的颜色。前任：hardRequiredHintText: {    color: `${theme.palette.warning.light} !important`},是否有更简单的方法来覆盖 MUI 错误颜色并查看它反映在所有使用它的组件中？

Answer 1

对于每种类型的验证，显示不同的颜色，我们可以将参数传递给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>

  );

}