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 ( <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> ); } }
Here is the code: “https://codesandbox.io/s/fancy-morning-30owz“
Advertisement
Answer
If you use the selection tools in your browser, you would find out that:
The class name used is 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>
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
<TextField className={classes.root} ... > </TextField>
By this way, you can change the label color, as the screenshot is shown below (currently red)
Try it online: