material-ui 中的文本区域

Question

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

这是文本区域：https://material.io/guidelines/components/text-fields.html#text-fields-field-types（CMD/Ctrl + F“文本区域”）。

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

Answer 1

要使

TextField

像

textarea

一样工作，您可以使用

multiline

道具。您可以在此处

阅读有关 

TextFied

 及其 

props 的更多信息。

示例

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

如果您想根据内容缩放多行输入框（无论内容长度如何），可以设置

maxRows={Infinity}

。

Answer 2

我们可以使用轮廓多行

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

的样式将全局应用

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/

您可以通过阅读本指南了解有关两种导入之间的差异的更多信息。

Answer 4

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

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

其中

scrollHeight

是文本区域的内部高度，

style.height

是外部高度（如果外部 < inner, scrollbar shows)