如何使用带有上下文的 Material UI 的 Input API 的错误道具和 css

Posted 2023-02-22

【中文标题】如何使用带有上下文的 Material UI 的 Input API 的错误道具和 css

【英文标题】：How do I use the error prop and css for Input API of Material UI with context

【发布时间】：2020-07-16 05:48:20

【问题描述】：

我需要为 error 及其使用使用 MUI 输入 API 道具和 CSS。

我的代码如下所示：

const [value, setValue] = useState<string>(cell.value);
const [startAdornment, setStartAdornment] = useState<adornmentTypes>("");
const [endAdornment, setEndAdornment] = useState<adornmentTypes>("");
const [error, seterror] = useState<error>(false);

<Input
  id=id
  value=value
  onChange=_onChange //have a method
  onBlur=_onBlur //have a method
  onFocus=_handleFocus //have a method
  startAdornment=startAdornment //have switch cases on special character $,% etc
  endAdornment=endAdornment
  error=error />

现在根据材料文档error - bool - If true, the input will indicate an error. This is normally obtained via context from FormControl.

对于伪类error - .Mui-error - Pseudo-class applied to the root element if error=true.

由于值类型描述为字符串，现在我无法使用错误状态为 true！

我错过了什么？请帮忙！

【问题讨论】：

那个帖子解决了你的问题吗？请提供一些反馈将不胜感激。见What should I do when someone answers my question?

嗨@keikai 很抱歉没有及时回复 - 是的，这很有帮助 - 问题是我正在尝试使用 cass/cscc 而不是样式化的组件类型 - 它花了一些时间但想通了出去看看你建议的文件。谢谢！不过，我不能以新手的身份投票赞成答案:)

【参考方案1】：

我们可以从Input API的Material-UI文档中看到

对于道具：错误

输入：bool 说明：如果为真，输入将指示错误。

对于 css：错误

全局类：.Mui-error 说明：如果 error=true，则将伪类应用于根元素。

它们是两个不同的东西，我们可以像下面这样使用它们：

<Input
  ...
  error=errorFlag
  classes=error: classes.errorStyleClass
/>

如果 props 错误的值为 true，则会应用 CSS 错误的样式。

---

这就是这类东西的概念。由于我们无法从帖子中获得更多信息，如果还有其他问题，请进行更新。