![](/img/trans.png)
[英]How to change the underline and label color of Material-UI <Select/>
[英]Reactjs material-ui TextField change color label and underline activity field input
您可以通过classes
属性提供它们来否决样式。 我添加了一个使用makeStyles
钩子的示例,但该属性也可以与withStyles
HOC提供的类一起使用。
import React from "react";
import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
"& label.Mui-focused": {
color: "orange"
},
"& .MuiInput-underline:after": {
borderBottomColor: "orange"
}
}
}));
function App() {
const classes = useStyles();
return <TextField label="My label" classes={classes} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
因此,如果您使用的是Component
,它将是这样的:
import React from "react";
import { TextField } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
const styles = theme => ({
root: {
"& label.Mui-focused": {
color: "orange"
},
"& .MuiInput-underline:after": {
borderBottomColor: "orange"
}
}
})
class App extends React.Component {
render() {
return (
<TextField label="My label" classes={this.props.classes} />
)
}
}
export default withStyles(styles)(App)
要了解自定义 TextField 组件,请查看以下示例: https : //material-ui.com/components/text-fields/#customized-inputs
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.