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 :
JavaScript
x
28
28
1
import React from "react";
2
import ReactDOM from "react-dom";
3
import { TextField, Button, Grid } from "@material-ui/core";
4
5
class App extends React.Component {
6
render() {
7
return (
8
<Grid container justify={"center"} alignItems={"center"} spacing={1}>
9
<Grid item>
10
<TextField
11
id="outlined-name"
12
label="Name"
13
value={"Enter value"}
14
onChange={() => console.log("I was changed")}
15
margin="normal"
16
variant="outlined"
17
/>
18
</Grid>
19
<Grid item>
20
<Button variant="contained" color="primary">
21
Submit
22
</Button>
23
</Grid>
24
</Grid>
25
);
26
}
27
}
28
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
JavaScript
1
2
1
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled" data-shrink="true" for="outlined-name">Name</label>
2
So set the styles using nesting selector to the TextField
component
Functional component
JavaScript
1
11
11
1
import { makeStyles } from "@material-ui/core/styles";
2
const useStyles = makeStyles(theme => ({
3
root: {
4
"& .MuiFormLabel-root": {
5
color: "red" // or black
6
}
7
}
8
}));
9
10
const classes = useStyles();
11
Classical component
JavaScript
1
13
13
1
import { withStyles, createStyles } from "@material-ui/core/styles";
2
const styles = theme => createStyles({
3
root: {
4
"& .MuiFormLabel-root": {
5
color: "red"
6
}
7
}
8
});
9
10
const { classes } = this.props;
11
12
export default withStyles(styles)(App);
13
usage
JavaScript
1
6
1
<TextField
2
className={classes.root}
3
4
>
5
</TextField>
6
By this way, you can change the label color, as the screenshot is shown below (currently red)
Try it online: