MUI5 React 条件文本字段错误颜色

Question

I want to conditionally change the error color (warning orange and error red). I don't want to use useStyle because it's deprecated in mui5. Here is my code:

import { TextField as MuiTextField } from "@mui/material";

const TextField = styled(MuiTextField)(({ theme, isWarning }) => ({
  "& .MuiOutlinedInput-root": {
    "&.Mui-error": {
      "& fieldset": {
        borderColor: isWarning
          ? theme.palette.warning.main
          : theme.palette.error.main,
      },
      "&:hover fieldset": {
        borderColor: isWarning
          ? theme.palette.warning.main
          : theme.palette.error.main,
      },
      "&.Mui-focused fieldset": {
        borderColor: isWarning
          ? theme.palette.warning.main
          : theme.palette.error.main,
      },
    },
  },
}));

Then I use it like this:

         <TextField
           label="Description"
           name="description"
           value={this.state.description}
           onChange={this.handleChange}
           error={Boolean(errors?.description)}
           isWarning={this.state.isWarning}
         />

It works but I got this error in the console:

Warning: React does not recognize the isWarning prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase iswarning instead. If you accidentally passed it from a parent component, remove it from the DOM element.

So I tried to use lowercase but I got this error:

Received true for a non-boolean attribute iswarning .

How can I do to remove this log? Maybe there is another to change the color?

Answer 1

Instead of using a style, you can change the color of the TextField to get the same effect. Make sure error is set to false or it will override the color to red.

<TextField
   ...
   error={Boolean(errors?.description) && !this.state.isWarning}
   color={this.state.isWarning ? "warning" : undefined}
/>

The color property docs can be found here .