material-ui中的文本区域

Question

请问有人能帮我使用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查找“文本区域”）。

引用： 文本区域高于文本字段，并将溢出文本换行。当光标到达字段底部时，它们会垂直滚动。

- Johann Gomes

Answer 1

为了让TextField像textarea一样工作，您可以使用multiline属性。您可以在此处了解更多关于TextField及其props的信息。

示例

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

如果您想根据内容（而不是内容长度）来缩放多行输入框，可以将maxRows = {Infinity}设置为最大值。

- bennygenel

---

@BishopZ 没有一个 [mcve] 很难确定问题所在。 - bennygenel

提示：如果您想根据内容缩放多行输入框（而不考虑内容长度），可以将 rowsMax={Infinity} 设置为最大值。 - Benny Code

但是，TextField的内部文本基本上会变小。我们需要用自定义css来覆盖它吗？ - Rehan Sattar

实际上，这些属性的名称是minRows和maxRows（而不是rowsMax和rowsMin）。默认情况下，如果没有指定这些属性，它将根据文本内容自动调整大小。 - RollingInTheDeep

新文档链接，应该是被接受的答案。 - sr9yar

当设置输入的 rows 时，您不能使用 minRows 或 maxRows 属性。 - Mathew O'Sullivan

Answer 2

我们可以使用带有轮廓的多行<TextField>来创建文本区域，
并且可以通过创建一个主题来在<App/>内全局应用。

theme.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>的样式将全局应用。

- Sampath kumar

Answer 3

你应该使用material UI中提供的TextareaAutosize API。

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

或者

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

以下示例具有TextareaAutosize的所有属性： https://material-ui.com/components/textarea-autosize/ 通过阅读此指南，您可以了解两种导入方式之间的区别。

- Rishav Kumar

---

但看起来一点也不像材料。 - tasqyn

你知道怎么使用这个组件，并与 InputBase 一起实现相同的样式和主题吗？ - irzhy

不要使用看起来很糟糕的TextareaAutosize，而是在TextField上设置这些属性：multiline minRows={3} maxRows={20}，例如：<TextField fullWidth multiline minRows={3} maxRows={20} />。multiline = textarea，maxRows = 自动调整大小最多到这么多行，可选minRows = 最小行数。 - Jake

Answer 4

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

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

scrollHeight 是文本框的内部高度，style.height 是外部高度（如果外部高度小于内部高度，则会显示滚动条）

- VityaSchel