How can I remove the underline of TextField from Material-UI?

问题

I want the TextField to be naked(no underline) when using material-ui TextField. I do know that using InputBase from material-ui can achieve this, but I kinda need to use TextField API to achieve this but i did not find the way to do it in the API guide.

回答1:

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?

来源：https://stackoverflow.com/questions/57914368/how-can-i-remove-the-underline-of-textfield-from-material-ui