Even though this is currently the accepted answer, please see the other answer instead (using the disableUnderline prop). I wrote this answer after having recently written an answer about how to customize the underline (which uses approaches similar to this answer) and missed that there was a property specifically for removing the underline.
Below is an example of how to remove the underline. :before is used for the default and hover styling and :after is used for the focused styling, so the border needs to be removed for both of those cases.
The multiple ampersands (e.g. "&&&:before") increase the CSS specificity of the rule so that it wins over the default styling (e.g. &:hover:not($disabled):before).
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
});
function App() {
const classes = useStyles();
return <TextField defaultValue="default text" InputProps={{ classes }} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Related answer: How do I custom style the underline of Material-UI without using theme?
