How to access Material UI's text field bottom border on-hover element/color

2
votes

I'm trying to customize material UI's textfield component.

I can modify the bottom border color before I move my mouse over the field, and its color after I click on the field. But between these two moments, when my mouse just hovers over the field, the bottom border goes black, and I can't figure out how to change that color. I've tried to identify the problem by using different colors, but even the on-hover green just appears next to the black line. Trying to identify it via developer tools hasn't helped - there seems to be nothing that would make the on-hover line black. How could I get a hold of this mysterious black line/color?

Here's a picture of the component when I hover my mouse over it

const CreateStyles = makeStyles(() => ({
  root: {
    '& .MuiInput-underline:before': {
      borderBottom: '2px solid white',
    },
    '& .MuiInput-underline:after': {
      borderBottom: '2px solid yellow',
    },
    '& .MuiInput-underline:hover': {
      borderBottom: '2px solid green',
    },
  },
}));
1
material-ui

1 Answers

2
votes

Ciao, this black line on green line appears because you are overriding .MuiInput-underline:hover. Try to override .MuiInput-underline:hover:before instead, like:

root: {
    "& .MuiInput-underline:before": {
      borderBottom: "2px solid white"
    },
    "& .MuiInput-underline:after": {
      borderBottom: "2px solid yellow"
    },
    "& .MuiInput-underline:hover:before": {
      borderBottom: "2px solid green"
    }
  }

And black line disappears. Here a codesandbox example.