如何从Material-UI删除TextField的下划线? [英] How can I remove the underline of TextField from Material-UI?
问题描述
当我使用material-ui TextField时,我希望TextField是裸露的(没有下划线).我确实知道从material-ui使用InputBase可以实现此目的,但是我有点需要使用TextField API来实现此目的,但是我在API指南中找不到实现此目的的方法.
I want the TextField to be naked(no underline) when using material-ui TextField. I do know that using InputBase from material-ui can achieve this, but I kinda need to use TextField API to achieve this but i did not find the way to do it in the API guide.
推荐答案
下面是如何删除下划线的示例. :before
用于默认样式和悬停样式,:after
用于焦点样式,因此这两种情况都需要删除边框.
Below is an example of how to remove the underline. :before
is used for the default and hover styling and :after
is used for the focused styling, so the border needs to be removed for both of those cases.
多个&字符(例如"&&&:before"
)增加了 CSS特异性规则,以便赢得默认样式(例如
The multiple ampersands (e.g. "&&&:before"
) increase the CSS specificity of the rule so that it wins over the default styling (e.g. &: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);
相关答案: 查看全文