. Advertisement .
..3..
. Advertisement .
..4..
When working with Material-UI, have you ever had to “Change material-ui Textfield label styles in react“? If you do not know how to work the above feature of Material-UI, please refer to this article of ours.
When do you need to change material-ui Textfield label styles in react?
Here is an example program that needs to change the color label:
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>
);
}
}
Tips to “Change material-ui Textfield label styles in react”
Solution 1: Check the tools again
Check your tools again, you will realize your class name is declaring using “MuiFormLabel-root” like below:
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled" data-shrink="true" for="outlined-name">Name</label>
You can follow below instruction by applying nested selector in TextField:
Below is the program that applies Functional component:
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
"& .MuiFormLabel-root": {
color: "red" // or black
}
}
}));
...
const classes = useStyles();
If you want to create color labels with Classical component, refer to the program below:
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);
This is the declarative command structure you apply in the above situation:
<TextField
className={classes.root}
...
>
</TextField>
Below is the display of the result obtained after following the above steps:
......... ADVERTISEMENT .........
..8..
Solution 2: Call the makeStyles function
Calling the makeStyles function with an object that has the styles you want to apply is also a great way for you to change material-ui Textfield label styles in react. Look at the following example to understand more about this method:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles({
input: {
color: "blue"
}
});
export default function App() {
const classes = useStyles();
return (
<TextField
inputProps={{ className: classes.input }}
id="outlined-basic"
label="Write something..."
variant="outlined"
/>
);
}
To use an object’s input property, which is set to an object whose color property is set to “blue”, when calling makeStyles.
The classes object is then returned by calling useStyles.
The inputProps property of the TextField component is then set to an object with the classes set as its className property.
Using makeStyles, you define an input class.
The input text should be blue because you set the color property to “blue”.
Conclusion
After using material ui with reactjs, I find it quite handy. Those of you who are just starting out with react should give it a try. Hopefully through the article “Change material-ui Textfield label styles in react” you will know how to change the label color as desired. I would also like to remind you that the Material Design documentation is merely a set of recommended guidelines. You don’t have to adhere to it completely, as long as you make sure the end result is consistent and intuitive. If you have any problems, please contact us for answers. Thanks for reading!
Read more
→ How to Downgrade React Version 17 to 16 – A Complete Guide
Leave a comment