如何从 Material-UI 中删除 TextField 的下划线？ [复制]答案

【问题标题】：How can I remove the underline of TextField from Material-UI? [duplicate]如何从 Material-UI 中删除 TextField 的下划线？ [复制]
【发布时间】：2020-01-14 18:48:05
【问题描述】：

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

【问题讨论】：

只要去掉variant属性，就在the documentation标有“Naked Input”的地方。
@ChrisW。 “裸输入”示例直接使用InputBase（而不是TextField）——问题提到要避免的确切解决方案。

标签： css reactjs material-ui

【解决方案1】：

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

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

【讨论】：

真正的答案
如果有人检查这个
对我来说，这适用于自动完成，但使用 InputProps，大写
使用大写“InputProps”而不是“inputProps”！
只需将其恢复为InputProps，如 cmets 中所述。为了将来参考，小写的inputProps 针对输入的属性，而不是传递给MUI 组件的props。 Documentation

【解决方案2】：

即使这是目前公认的答案，请改为查看 other answer（使用 disableUnderline 属性）。我最近写了一个关于如何自定义下划线的答案（使用类似于这个答案的方法）并且错过了有一个专门用于删除下划线的属性后写了这个答案。

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

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

【讨论】：

谢谢你，Ryan，非常详细的回答，这正是我想要的！