0

Im trying to change the border color of the ::after pseudo element of a standard textfield from mui, but I cant figure out how

<TextField id="standard-basic" label="Email" variant="standard"/>

this is the textfield that I want to change the color of, Its default is blue. Ive tried the following:

    const inputProps = {
        style: {
          '&.MuiInput-input::after': {
            borderBottom:"2px solid red"
          },
        },
      };

<TextField id="standard-basic" label="Email" variant="standard" InputProps={inputProps} />

Didnt work!

Maher Lawand
  • 1
  • 1
  • Does this answer your question? [CSS pseudo selectors with MUI](https://stackoverflow.com/questions/53768260/css-pseudo-selectors-with-mui) – jeremy-denis Jan 03 '23 at 12:52
  • N.B. the `.MuiInput-input` is most probably a real HTML `` element what is more or less a "replaced element" and as such cannot have `::before` / `::after` pseudo elements in (most?) browsers. – myf Jan 03 '23 at 13:49

1 Answers1

0

Have you tried declaring the var and also specifying the color type in the CSS script? I think you should get something really different. And also watch where or how you input the semi-colon and commas. I hope this helps

Charles Gabriel
  • 1
  • 2
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/q/214173). – Fastnlight Jan 03 '23 at 15:56