material-ui 中的文本区域答案

【问题标题】：Text Area in material-uimaterial-ui 中的文本区域
【发布时间】：2018-03-05 17:51:33
【问题描述】：

有人可以帮助我使用 material-ui 库将 TextField 个性化设置为 TextArea 吗？我没有找到任何可以将其个性化为 TextArea 的参数：https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts

这是 TextArea:https://material.io/guidelines/components/text-fields.html#text-fields-field-types (CMD/Ctrl + F '文本区域')。

文本区域比文本字段高，并将溢出文本换行到新队。当光标到达底部时，它们会垂直滚动领域。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

要使TextField 像textarea 一样工作，您可以使用multiline 属性。您可以阅读有关TextFied 及其props here 的更多信息。

示例

<TextField
  placeholder="MultiLine with rows: 2 and rowsMax: 4"
  multiline
  rows={2}
  maxRows={4}
/>

如果您想随内容缩放多行输入框（无论内容长度如何），您可以设置maxRows={Infinity}。

【讨论】：

@BishopZ 很难说没有minimal reproducible example 有什么问题。
提示：如果您想随内容缩放多行输入框（无论内容长度如何），您可以设置rowsMax={Infinity}。
但是TextField的内部文字基本上是变小了。我们是否必须用自定义 css 覆盖它？
实际上属性被命名为 minRows 和 maxRows（不是 rowsMax 和 rowsMin）。默认情况下，如果不指定这些属性，它将增长以适合文本。
New link to the docs 这应该是公认的答案。

【解决方案2】：

您应该使用材质 UI 中提供的TextareaAutosize API。

import TextareaAutosize from '@material-ui/core/TextareaAutosize';

或

import { TextareaAutosize } from '@material-ui/core';

以下示例具有 TextareaAutosize 的所有属性： https://material-ui.com/components/textarea-autosize/

您可以通过阅读this guide 了解更多关于这两个导入之间的区别。

【讨论】：

但看起来一点也不像材料
您知道如何将此组件与InputBase 一起使用以获得相同的样式和主题
在 TextField 上设置这些属性，而不是看起来像垃圾的 TextareaAutosize：`multiline minRows={3} maxRows={20}，例如：。 multiline = textarea, maxRows = 自动调整到这么多行，可选 minRows = 要使用的最少行数。

【解决方案3】：

我们可以在文本区域使用轮廓多行<TextField>
它可以通过创建一个主题来实现，以在<App/>内的任何地方全局应用

主题.js

import { createMuiTheme} from '@material-ui/core/styles';
const theme = createMuiTheme({
 overrides: {
    MuiOutlinedInput: {
        multiline: {
            fontWeight: 'bold',
            fontSize: '20px',
            color: 'purple',
            width: '50vw'
        }
    }
}
  
});
export default theme;

app.js

...
import { ThemeProvider } from '@material-ui/core/styles';
import Theme from './relevant-path-where-the-above-theme.js-file-is-saved/Theme';
...
...
render() {
    
    return (
      <ThemeProvider theme={Theme}>
        <div className="App"> 
            <Routes/>
        </div>
      </ThemeProvider>
        
    );
  }

SomeComponent.js

...
<TextField
  id="outlined-multiline-static"
  label="Multiline"
  multiline
  rows={10}
  variant="outlined"
/>
...

现在，轮廓多线 <TextField> 的样式将全局应用

【讨论】：

【解决方案4】：

如果你想要一些简单的东西而不是整个 material-ui 组件，只需使用以下代码：

textarea.style.height = textarea.scrollHeight+'px'

scrollHeight 是 textarea 的内部高度，style.height 是外部（如果外部

【讨论】：