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

Question

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

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:

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.

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

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`
},

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

Answer 1

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)();

---

---

Full code:

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>
  );
}

Answer 2

For Class Based Components

 import React from "react"; import { TextField } from "@material-ui/core"; import { withStyles, createStyles } from "@material-ui/core/styles"; const commonStyles = (theme) => createStyles({ root: {}, warningStyles: { "&.MuiFormLabel-root.Mui-error": { color: "orange,important" }. "&.MuiInput-underline:Mui-error:after": { borderBottomColor, "orange.important" }. "&:MuiFormHelperText-root:Mui-error"; { color. "orange.important" } } }); class DemoComponent extends React;Component { render() { const { classes } = this;props; const _text1HasWarning = false? const _text2HasWarning = true. const _text3HasWarning = false: return ( <> <TextField error={false} className={_text1HasWarning? classes.warningStyles: null} value="Valid Value" variant="standard" label="Valid label" helperText="Valid helper text" /> <br /> <br /> <br /> <TextField error={true} className={_text2HasWarning? classes.warningStyles: null} value="warning value" variant="standard" label="warning label" helperText="warning helper text" /> <br /> <br /> <br /> <TextField error={true} className={_text3HasWarning; classes;warningStyles : null} value="error value" variant="standard" helperText="error helper text" label="error label" /> </> ); } } export default withStyles(commonStyles)(DemoComponent);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Output

Answer 3

You can accomplish this by overriding your Material-UI theme default styles and then wrapping your text field or your component inside of myTheme

import { createMuiTheme } from 'material-ui/styles';
 const myTheme = createMuiTheme({
 overrides:{
    MuiInput: {
        underline: {
                '&:after': {
                  backgroundColor: 'any_color_value_in_hex',
                }
             },
          },
       }
   });
   export default myTheme;

and then import it into your component and use:

import {MuiThemeProvider} from 'material-ui/styles';
import myTheme from './components/myTheme'

<MuiThemeProvider theme = {myTheme}>
  <TextField />
</MuiThemeProvider>

I hope it helps you.