'Change borderBottomColor of MUI TextField when input is filled

I'm creating a form using MUI, by default TextField bottom border is grey, blue on focus then again grey on focus loss. I aiming to make it not lose blue color after filling the field:

enter image description here

I have tried something like this but without any success.

 .MuiInput-underline:after {
    border-bottom: 2px solid rgb(17, 0, 172);
}
cssreactjsmaterial-uimaterial-design


Solution 1:[1]

Solved this by simply passing sx with conditional styles to TextField.

     sx={{
      "& .MuiInput-underline::before":
        textInputValue !== ""
          ? { borderBottomColor: "blue" }
          : { borderBottomColor: "grey" },
    }}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Darpek

Related Questions