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

Question

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

- H.Zhao

---

只需删除 variant 属性，它在文档中被标记为“裸输入”。 - Chris W.

@ChrisW. “Naked Input” 示例直接使用 InputBase（而不是 TextField）-- 这正是该问题所提到要避免的确切解决方案。 - Ryan Cogswell

Answer 1

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

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

- Kofi Nartey

---

真正的答案。 - pmccallum

如果有人查看此项 <Autocomplete>，这样做会禁用自动完成下拉菜单。希望对某些人有所帮助。 - Arosha

对我来说，在自动完成方面使用InputProps，并将其大写，这很有效。 - jstnno

使用大写的"InputProps"而不是"inputProps"！ - Handeman

根据评论中提到的，我不得不将其恢复回InputProps。以供日后参考，小写的inputProps是针对输入框属性而非传递给MUI组件的props。文档链接 - lawrence-witt

Answer 2

尽管目前这是被接受的答案，请参见其他答案（使用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);

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

- Ryan Cogswell

---

谢谢你，Ryan，非常详细的回答，正是我想要的！ - H.Zhao