如何从 Material-UI 中删除 TextField 的下划线？

Question

在使用 material-ui TextField 时，我希望 TextField 是裸露的（没有下划线）。我确实知道使用 material-ui 中的 InputBase 可以实现这一点，但我有点需要使用 TextField API 来实现这一点，但我没有在 API 指南中找到这样做的方法。

Answer 1

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

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

Answer 2

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

下面是如何删除下划线的示例。: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 的下划线样式？