6

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"

2 Answers 2

13

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)


enter image description here


Try it online:

Edit staging-framework-3h4m8

1
  • Cant we give directly to class Component without creating a functional component?
    – Sandhya
    Mar 18, 2020 at 9:19
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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.