react 替换标签内容_如何在React中更改Material-UI Textfield标签样式

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?

Here is the Code :

import React from "react";

import ReactDOM from "react-dom";

import { TextField, Button, Grid } from "@material-ui/core";

class App extends React.Component {

render() {

return (

id="outlined-name"

label="Name"

value={"Enter value"}

onChange={() => console.log("I was changed")}

margin="normal"

variant="outlined"

/>

Submit

);

}

}

解决方案

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

The class name used is MuiFormLabel-root

Name

So set the styles using nesting selector to the TextField component

Functional component

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({

root: {

"& .MuiFormLabel-root": {

color: "red" // or black

}

}

}));

...

const classes = useStyles();

Classical component

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);

usage

className={classes.root}

...

>

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

Try it online: