如何在不使用主题的情况下自定义Material-UI的下划线样式? [英] How do I custom style the underline of Material-UI without using theme?
问题描述
当variant="outlined"
且我在InputProps
中使用notchedOutline
时,我在大纲自定义样式方面取得了成功.
I have success with outline custom styling when variant="outlined"
and I use notchedOutline
in InputProps
.
否则-variant=[anything else]
仅存在底部边框-即使将underline
作为InputProps
中的键/类,也无法使用.
Otherwise - variant=[anything else]
where only a bottom border exists - it doesn't work, even with underline
as the key/class in 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
}}
/>
)
推荐答案
In order to determine how to do this, it is helpful to look at how the default styling is done within Input.
:before
用于默认样式和悬停样式,:after
用于集中样式.
:before
is used for the default and hover styling and :after
is used for the focused styling.
以下是如何设置样式的有效示例:
Here is a working example of how to style it:
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);
这篇关于如何在不使用主题的情况下自定义Material-UI的下划线样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!