material-ui 中的文本区域

Posted 2023-02-22

【中文标题】material-ui 中的文本区域

【英文标题】：Text Area in material-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 '文本区域')。

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

【参考方案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 是外部（如果外部