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

Question

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

Answer 1

您还可以通过将InputProps属性设置为disableUnderline，在TextField组件上使用true属性。

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

Answer 2

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

相关答案：How do I custom style the underline of Material-UI without using theme?