Material UI 文本域无法更改多行字体大小

Question

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

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

问题是默认的输入道具样式随后被覆盖，阻止了文本字段的高度动态变化以适应多行。

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

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

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

Answer 2

如果您尝试更改自动完成输入（使用文本字段组件）的字体大小，则所选答案会执行此操作，但也会破坏下拉菜单，因为它会覆盖整个 InputProps 对象。您需要在旧对象之上添加样式更新：

renderInput={(params) => <TextField
  {...params}
  label="My Label"
  InputProps={{ ...params.InputProps, style: { fontSize: 30 } }}
/>}

Material UI 文本域无法更改多行字体大小

Material UI Textfield Can't Change Font Size for Multiline

textfield

reactjs

material-ui