Categories
React Answers

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

Spread the love

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.

2 replies on “How to change the text field font color in React Material UI?”

Unfortunately, this doesn’t work for me.
I imported TextField from @mui/material/TextField and makeStyles from @mui/styles. I once used makeStyles globally and once inside the component function but in neither way it will display a different color than black.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.