我希望在使用material ui TextField时，TextField是裸体的(没有下划线).我知道从material ui使用InputBase可以实现这一点，但我需要使用TextField API来实现这一点，但我在API指南中没有找到实现这一点的方法.
推荐答案
尽管这是目前公认的答案，但请看other answer(使用disableUnderlineprops ).我最近写了一个关于如何自定义下划线的答案(它使用了类似于这个答案的方法)之后，我写了这个答案，但没有注意到有一个专门用于删除下划线的属性.
下面是如何删除下划线的示例.: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?
Reactjs相关问答推荐
MUImaterial -ui-如何将文本字段和 Select 分组？
为什么VScode中的React应用程序无法识别文件夹 struct ？
react 表复选框不对任何操作做出react
将cy.get()与动态类名一起使用？
使用useReducer时，props 未从父级传递给子或孙级
我想删除NextJs中的X轴标签APEXCHARTS
基本react 应用程序正在触发两次Use Effect
子路径上未定义useMatches句柄
React Todo List 应用程序我在实现删除功能时遇到问题
无法使用 Suspense 和 Await 获取数据
如何更新 FunctionComponentElement 的 props
如何管理组件列表的复杂状态？ (Nextjs/ReactJS)
React 组件列表中的第一个计时器正在获取值 NaN
ReactJS：在导航栏中使用 Select inside Link 组件时如何避免重定向？
在 React 的父级中多次调用子级时从子级获取数据到父级
React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换
如何使用react 路由将 url 参数限制为一组特定的值？
如何将 id 从页面传递到另一个页面？
将 set statehook 函数传递给子路由组件.解构错误
运行开发服务器时如何为 Vite 指定运行时目录
实用课程推荐