Text Area in material-ui

Question

Could someone help me making a TextField personalization into a TextArea, using material-ui library? I am not finding any parameter that should personalize it into a TextArea: https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts

This is the TextArea:https://material.io/guidelines/components/text-fields.html#text-fields-field-types (CMD/Ctrl + F 'Text area').

Text areas are taller than text fields and wrap overflow text onto a new line. They scroll vertically when the cursor reaches the bottom of the field.

Answer 1

To make TextField work like a textarea you can use multiline prop. You can read more about TextFied and its props here.

Example

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

You can set maxRows={Infinity} if you want to scale your multiline input box with your content (regardless of the content length).

Answer 2

We can use outlined multiline <TextField> for text area
and it could be implemented by creating a theme to apply globally anywhere inside <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" /> ... 

Now the style for outlined multiline <TextField> will be applied globally