How do I custom style the underline of Material-UI without using theme?

Question

I have success with outline custom styling when variant=\"outlined\" and I use notchedOutline in InputProps.

Otherwise -

Answer 1

In order to determine how to do this, it is helpful to look at how the default styling is done within Input.

:before is used for the default and hover styling and :after is used for the focused styling.

Here is a working example of how to style it:

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  underline: {
    "&:before": {
      borderBottom: "2px solid green"
    },
    "&:hover:not($disabled):not($focused):not($error):before": {
      borderBottom: "2px solid blue"
    },
    "&:after": {
      borderBottom: "3px solid purple"
    }
  },
  disabled: {},
  focused: {},
  error: {}
};
function App({ classes }) {
  return (
    

      
    
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);