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

Question

我想有条件地更改错误颜色（警告橙色和错误红色）。 我不想使用useStyle ，因为它在 mui5 中已被弃用。 这是我的代码：

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

然后我像这样使用它：

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

它有效，但我在控制台中收到此错误：

警告：React 无法识别 DOM 元素上的isWarning道具。 如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为 lowercase iswarning 。 如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

所以我尝试使用小写字母，但出现此错误：

对于非布尔属性iswarning接收到true 。

我该怎么做才能删除此日志？ 也许还有另一种改变颜色？

Answer 1

您可以更改 TextField 的color来获得相同的效果，而不是使用样式。 确保error设置为 false 否则它将覆盖color为红色。

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

可以在此处找到颜色属性文档。