如何在React中更改material-ui Textfield标签样式 [英] How to change material-ui Textfield label styles in react

问题描述

我是Material-UI的新手，我无法弄清楚如何更改以灰色显示的标签的颜色.我要在black中使用它.有人可以帮我这个查询吗?

I'm new to Material-UI, I couldn't able to figure it out, how to change the color of the label which is showing in grey color. I want it in black. Can anyone help me with this query?

代码在这里:

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 "

推荐答案

如果在浏览器中使用选择工具，则会发现:

If you use the selection tools in your browser, you would find out that:

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

通过这种方式，您可以更改标签颜色，如下图所示(当前为红色)

By this way, you can change the label color, as the screenshot is shown below (currently red)

在线尝试:

这篇关于如何在React中更改material-ui Textfield标签样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！