Material UI Textfield Can't Change Font Size for Multiline

Question

I am trying to change the font size of a Material UI multiline TextField. To do this, I am setting the style InputProp like so:

inputProps={{style: {fontSize: "14px"}}}

The problem is that the default input props styles are then overwritten, preventing the textfield's height from dynamically changing to accommodate multiple lines.

How do I properly change the font size of a multiline Material UI textfield?

Note: I'm using inline styles, not class names.

Answer 1

You just need to use InputProps (uppercase "I") instead of inputProps. The lowercase inputProps are passed to the final textarea element, but for the styling to work properly, the InputBase component that wraps the textarea in a div needs to have the correct font size.

Here's a working example:

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";

function App() {
  return (
    <div className="App">
      <TextField multiline InputProps={{ style: { fontSize: 40 } }} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);