如何在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 {&nbsp; &nbsp; background-color: $bg-color;&nbsp; &nbsp; color: $color;}.MuiTextField-root > .MuiFormLabel-root.Mui-focused {&nbsp; &nbsp; color: $color;}