材料中的文本区域-ui

Question

有人可以帮我使用material-ui库在TextArea中创建TextField个性化吗？我没有找到任何应​​该将其个性化为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＆＃39;文字区＆＃39;）。

  

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

提前致谢，

Answer 1

要使TextField像textarea一样工作，您可以使用multiline道具。您可以详细了解TextFied及其props here。

示例

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

Answer 2

您应使用材料ui中可用的 TextareaAutosize API。

从'@ material-ui / core / TextareaAutosize'导入TextareaAutosize; //或
从'@ material-ui / core'导入{TextareaAutosize};

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

希望这对你有用！

Answer 3

我使用多行轮廓<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>概述的样式将全局应用

Answer 4

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

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

其中 scrollHeight 是 textarea 的内部高度，style.height 是外部（如果外部 < 内部，滚动条显示）