Реакция Как условно переопределить цвет ошибки TextField в Material-UI?

Question

Я использую библиотеку React Material-UI и хочу условно переопределить цвет ошибки TextField.

Мне нужно изменить helperText, border, text и требуемый цвет маркера на желтый, когда ошибка имеет определенный тип. Примерно так:

В противном случае я хочу сохранить цвет по умолчанию (красный) для всех остальных типов ошибок. Я пытался следовать тому же принципу, который использовался в 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 со свойством цвета, установленным в тот, который соответствует данному типу ошибки. Например:

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

Answer 2

Вы можете сделать это sh, переопределив стили по умолчанию для вашей темы Material-UI, а затем обернув текстовое поле или свой компонент внутри myTheme

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

, а затем импортируйте его в свой компонент и используйте:

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

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

Надеюсь, это поможет вам.