您还可以使用InputPropsTextField 组件上的prop 通过将disableUnderline属性设置为 来实现此目的true。

<TextField
  fullWidth
  placeholder="Search..."
  InputProps={{ disableUnderline: true }}
 />

即使这是目前已接受的答案，请改为查看其他答案（使用disableUnderlineprops）。我在最近写了一个关于如何自定义下划线的答案（使用类似于这个答案的方法）之后写了这个答案，并且错过了一个专门用于删除下划线的属性。

下面是如何删除下划线的示例。:before用于默认和悬停样式并:after用于聚焦样式，因此需要为这两种情况删除边框。

多个 & 符号（例如"&&&:before"）增加了规则的CSS 特异性，使其胜过默认样式（例如&: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);

相关答案：如何在不使用主题的情况下自定义 Material-UI 的下划线样式？