如何在react中更改material-ui Textfield标签样式

Question

我是 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 ”

Answer 1

如果您使用浏览器中的选择工具，您会发现：

使用的类名是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>

通过这种方式，你可以改变标签颜色，如下图所示（目前为红色）

Answer 2

如果您想将样式保留在单独的文件中，您可以编写：

.MuiTextField-root > label {

    background-color: $bg-color;

    color: $color;

}

.MuiTextField-root > .MuiFormLabel-root.Mui-focused {

    color: $color;

}