[英]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}
/>
可以在此处找到颜色属性文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.