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

Posted 2023-02-22

【中文标题】如何从 Material-UI 中删除 TextField 的下划线？ [复制]

【英文标题】：How can I remove the underline of TextField from Material-UI? [duplicate]

【发布时间】：2020-01-14 18:48:05

【问题描述】：

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

【问题讨论】：

只要去掉variant属性，就在the documentation标有“Naked Input”的地方。

@ChrisW。 “裸输入”示例直接使用InputBase（而不是TextField）——问题提到要避免的确切解决方案。

【参考方案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);

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

【讨论】：

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