我是 Material-UI 的新手，我無法弄清楚如何更改以灰色顯示的標簽的顏色。我想要它在black. 誰能幫我解決這個問題嗎？這是代碼：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> ); }}這是代碼：“ https://codesandbox.io/s/fancy-morning-30owz ”
2 回答
回首憶惘然
TA貢獻1847條經驗 獲得超11個贊
如果您使用瀏覽器中的選擇工具，您會發現：
使用的類名是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>
因此，使用組件的嵌套選擇器設置樣式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>
通過這種方式，你可以改變標簽顏色，如下圖所示（目前為紅色）
楊__羊羊
TA貢獻1943條經驗 獲得超7個贊
如果您想將樣式保留在單獨的文件中，您可以編寫：
.MuiTextField-root > label {
background-color: $bg-color;
color: $color;
}
.MuiTextField-root > .MuiFormLabel-root.Mui-focused {
color: $color;
}
- 2 回答
- 0 關注
- 133 瀏覽
添加回答
舉報
0/150
提交
取消