我是 Material-UI 的新手,我无法弄清楚如何更改以灰色显示的标签的颜色。我想要黑色
。谁能帮我解决这个问题吗?
这是代码:
import React from "react";
import ReactDOM from "react-dom";
import { TextField, Button, Grid } from "@material-ui/core";
class App extends React.Component {
render() {
return (
<Grid container justify={"center"} alignItems={"center"} spacing={1}>
<Grid item>
<TextField
id="outlined-name"
label="Name"
value={"Enter value"}
onChange={() => console.log("I was changed")}
margin="normal"
variant="outlined"
/>
</Grid>
<Grid item>
<Button variant="contained" color="primary">
Submit
</Button>
</Grid>
</Grid>
);
}
}
最佳答案
如果您使用浏览器中的选择工具,您会发现:
使用的类名是MuiFormLabel-root
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled" data-shrink="true" for="outlined-name">Name</label>
因此使用 nesting selector 设置样式到 TextField
组件
功能组件
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
"& .MuiFormLabel-root": {
color: "red" // or black
}
}
}));
...
const classes = useStyles();
经典组件
import { withStyles, createStyles } from "@material-ui/core/styles";
const styles = theme => createStyles({
root: {
"& .MuiFormLabel-root": {
color: "red"
}
}
});
...
const { classes } = this.props;
...
export default withStyles(styles)(App);
使用
<TextField
className={classes.root}
...
>
</TextField>
通过这种方式,你可以改变标签颜色,如下截图(目前为红色)
<小时/> <小时/>在线尝试:
关于javascript - 如何在react中更改material-ui Textfield标签样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60736015/