材料中的文本区域-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'文本区域').

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

提前致谢,

Answer 1

为了使TextField工作像textarea你可以使用multiline道具.你可以在这里阅读更多关于TextFied它的内容.props

例

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

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;

应用程序.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>
        
    );
  }

一些组件.js

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

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

Answer 3

您应该使用TextareaAutosizeMaterial UI 中提供的 API。

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

或者

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

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

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