How to correctly use :valid pseudoclass in mui components to change the border dynamically

Question

I'm trying to change the border color from Mui TextFields,, with createThem from Mui v5, if the input is valid. The border gets set inside ::before and ::after pseudoclasses. I'm using variant="standard" for the TextFields.

I can apply the pseudoclasses to the MuiInput with stylesOverride and change the input styles. But that doesn't give me the desired result. E.g. if I have an input endAdornment the bottom-border stops in front of the adornment, because I only modify the <input styles and endAdornment is not the part of the input.

Any help would be appreciated :D.

Answer 1

I have came up with one solution let me know if it works for you

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
  }

References - https://mui.com/material-ui/react-text-field/#customization Almost all code i have used from here only you can check this for more customization