How to change the text field font color in React Material UI?

Sometimes, we want to change the text field font color in React Material UI.

In this article, we’ll look at how to change the text field font color in React Material UI.

How to change the text field font color in React Material UI?

To change the text field font color in React Material UI, we call the makeStyles function with an object with the styles we want to apply.

For instance, we write:

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 call makeStyles with an object that has the input property that’s set to an object with the color property set to 'blue'.

Next, we call useStyles to return the classes object.

Then we set the inputProps property of the TextField component to an object with the className property set to the classes.input class which we defined with makeStyles.

We set the color property to 'blue', so the input text should be blue.

Conclusion

To change the text field font color in React Material UI, we call the makeStyles function with an object with the styles we want to apply.