Sometimes, we want to change font size of text field in React Material UI.

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

How to change font size of text field in React Material UI?

To change font size of text field in React Material UI, we can set the InputProps and the InputLabelProps prop to set the font size of the input box and the input label respectively.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <TextField
        label="label"
        margin="normal"
        InputProps={{ style: { fontSize: 40 } }}
        InputLabelProps={{ style: { fontSize: 40 } }}
      />
    </div>
  );
}

to set InputProps and InputLabelProps to { style: { fontSize: 40 } } so that the input box and the label both have font size 40px.

Conclusion

To change font size of text field in React Material UI, we can set the InputProps and the InputLabelProps prop to set the font size of the input box and the input label respectively.