如何在mui组件中正确使用:valid伪类来动态改变边框

Question

如果输入有效，我正在尝试使用 Mui v5 中的 createThem 更改 Mui TextFields 的边框颜色。边框在

::before

和

::after

伪类内设置。 我使用

variant="standard"

作为文本字段。

我可以使用 stylesOverride 将伪类应用到 MuiInput 并更改输入样式。但这并没有给我想要的结果。例如。如果我有一个输入 endAdornment ，底部边框会停在装饰前面，因为我只修改

<input

样式，而 endAdornment 不是输入的一部分。

如有任何帮助，我们将不胜感激：D.

Answer 1

我想出了一个解决方案，请告诉我它是否适合您

https://codesandbox.io/s/stackoverflow-question-hzkx3c?file=/src/Demo.js

"& input:valid + fieldset": {
    borderColor: "#E0E3E7",
    borderWidth: 1
  },
"& input:invalid + fieldset": {
    borderColor: "red",
    borderWidth: 1
  },
"& input:valid:focus + fieldset": {
    borderLeftWidth: 4,
    padding: "4px !important" // override inline-style
  }

参考资料 - https://mui.com/material-ui/react-text-field/#customization 我在这里使用的几乎所有代码只有您可以检查此以进行更多自定义