当variant="outlined"我notchedOutline在InputProps.
否则 -variant=[anything else]只有底部边框存在 - 它不起作用，即使underline作为InputProps.
我什至尝试过root。
export default ({ boxType, classes, value, onChange, style }) => (
<TextField
variant={boxType || "standard"}
value={value}
onChange={onChange}
InputProps={{
classes: {
notchedOutline: classes.notchedOutline,
underline: classes.underline,
root: classes.TextInputField
},
style
}}
/>
)
为了确定如何执行此操作，查看Input中如何完成默认样式会很有帮助。
:before用于默认和悬停样式，:after并用于聚焦样式。
这是如何设置样式的工作示例：
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
underline: {
"&:before": {
borderBottom: "2px solid green"
},
"&:hover:not($disabled):not($focused):not($error):before": {
borderBottom: "2px solid blue"
},
"&:after": {
borderBottom: "3px solid purple"
}
},
disabled: {},
focused: {},
error: {}
};
function App({ classes }) {
return (
<div className="App">
<TextField InputProps={{ classes }} />
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
您可以只使用
InputProps={{ disableUnderline: true }}.It 将在所有情况下禁用 textField 的下划线。在 react-material-ui 版本 3 及更高版本上测试。
不确定您使用的是哪个版本的 material-ui，但您可以根据需要覆盖类，请参阅以下 API 文档：
const useStyles = makeStyles({
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
});
三重＆符号（&）增加了 css 规则的特殊性，因此我们可以覆盖默认样式。就我而言，我将其设置为无。您可以根据需要设置样式。