How to change material-ui Textfield label styles in react

Question

I'm new to Material-UI, I couldn't figure 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"

keikai · Accepted Answer · 2020-03-30 12:41:03Z

14

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:

edited Mar 30, 2020 at 12:41

answered Mar 18, 2020 at 8:51

keikai

15.3k10 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandhya Over a year ago

Cant we give directly to class Component without creating a functional component?

Lajos Arpad · Accepted Answer · 2020-11-03 11:36:42Z

3

If you want to leave your style in a separate file, you can write:

.MuiTextField-root > label {
    background-color: $bg-color;
    color: $color;
}

.MuiTextField-root > .MuiFormLabel-root.Mui-focused {
    color: $color;
}

edited Nov 3, 2020 at 11:36

Lajos Arpad

80.4k42 gold badges123 silver badges235 bronze badges

answered Nov 3, 2020 at 11:04

Lucas Rhoden

311 bronze badge

Collectives™ on Stack Overflow

How to change material-ui Textfield label styles in react

2 Answers 2

Functional component

Classical component

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Functional component

Classical component

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related