customize material ui textfield underline using styled component
import TextField from "@material-ui/core/TextField";
import styled from "styled-components";
const StyledTextField = styled(TextField)`
/* default */
.MuiInput-underline:before {
border-bottom: 2px solid green;
}
/* hover (double-ampersand needed for specificity reasons. */
&& .MuiInput-underline:hover:before {
border-bottom: 2px solid lightblue;
}
/* focused */
.MuiInput-underline:after {
border-bottom: 2px solid red;
}
`;
export default StyledTextField;