Textbereich im Material-UI

Könnte mir jemand helfen, eine TextField-Personalisierung mithilfe der Material-UI-Bibliothek in eine TextArea umzuwandeln? Ich finde keinen Parameter, der es in eine TextArea personalisieren sollte: https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts

Dies ist die TextArea:https://material.io/guidelines/components/text-fields.html#text-fields-field-types (CMD/Strg + F ‘Textbereich’).

Textbereiche sind größer als Textfelder und brechen überlaufenden Text in eine neue Zeile. Sie scrollen vertikal, wenn der Cursor den unteren Rand des Felds erreicht.

Zu machen TextField arbeiten wie ein textarea Sie können verwenden multiline Stütze. Sie können mehr darüber lesen TextFied und sein props hier.

Beispiel

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

Sie können einstellen maxRows={Infinity} wenn Sie Ihr mehrzeiliges Eingabefeld mit Ihrem Inhalt skalieren möchten (unabhängig von der Inhaltslänge).

Wir können umrissene Mehrzeilen verwenden <TextField> für Textbereich
und es könnte implementiert werden, indem ein Thema erstellt wird, das global überall im Inneren angewendet werden kann <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"
/>
...

Jetzt der Stil für umrissene Multilinien <TextField> wird weltweit angewendet

Du solltest benutzen TextareaAutosize API in der Material-UI verfügbar.

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

oder

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

Das folgende Beispiel hat alle Attribute von TextareaAutosize:
https://material-ui.com/components/textarea-autosize/

Sie können mehr über den Unterschied zwischen den beiden Importen erfahren, indem Sie lesen diese Anleitung.

Wenn Sie anstelle der gesamten Material-UI-Komponente etwas Einfaches möchten, verwenden Sie einfach diesen Code:

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

Wo scrollHeight ist die innere Höhe des Textbereichs und style.height ist außen (wenn außen < innen, Bildlaufleiste zeigt)