材质UI文本字段无法更改多行的字体大小

Question

我正在尝试更改Material UI多行TextField的字体大小。为此，我将style InputProp设置如下：

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

问题在于，默认的输入道具样式会被覆盖，从而阻止文本字段的高度动态变化以容纳多行。

如何正确更改多行Material UI文本字段的字体大小？

注意：我使用的是内联样式，而不是类名。

Answer 1

您只需要使用InputProps（大写的“ I”）而不是inputProps。小写的inputProps被传递到最后的textarea元素，但是为了使样式正常工作，需要将textarea包裹在div中的InputBase组件具有正确的字体大小。

这是一个可行的示例：

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);