我在轮廓自定义样式方面取得了成功variant="outlined"
我用notchedOutline
in 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 https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Input/Input.js.
: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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)