繁体   English   中英

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

[英]MUI5 React conditional textfield error color

我想有条件地更改错误颜色(警告橙色和错误红色)。 我不想使用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

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

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

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

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

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM