Skip to content

How to change material-ui Textfield label styles in react

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>
            value={"Enter value"}
            onChange={() => console.log("I was changed")}
        <Grid item>
          <Button variant="contained" color="primary">

Here is the code: “


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



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

enter image description here

Try it online:

Edit staging-framework-3h4m8