How to set the TextField height React Material UI?

Sometimes, we want to set the TextField height React Material UI.

In this article, we’ll look at how to set the TextField height React Material UI.

How to set the TextField height React Material UI?

To set the TextField height React Material UI, we can set the InputProps prop of the TextField to an object that has the classes property.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { TextField } from "@material-ui/core";

const useStyles = makeStyles(() => ({
  input1: {
    height: 50
  },
  input2: {
    height: 200,
    fontSize: "3em"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: classes.input1 } }}
      />
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: classes.input2 } }}
      />
    </div>
  );
}

to call makeStyles with a function that returns an object with the classes with height styles.

Then we call useStyles to return the classes.

Next, we set InputProps to an object with the classes.input set to the classes we created with makeStyles to set the height of each TextField.

Conclusion

To set the TextField height React Material UI, we can set the InputProps prop of the TextField to an object that has the classes property.