How do I set a width for the TextAreaAutoSize component in Material-UI?

Question

I can't find any info anywhere on how to change the default width of a TextAreaAutosize component in material-ui.

It seems the only choice is to have this little box. Does anyone know of a better text area auto size component I can use, or how to change the width of the TextAreaAutoSize component?

The API doesn't show any properties that have anything to do with 'className'. I tried to use it anyway and it was ignored. I also tried wrapping the component in a Box, and styling that, but it was ignored by the TextArea.

Any help would be greatly appreciated!

Answer 1

Resizing by the user is turned off (via resize: "none") for TextField here in InputBase: https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui/src/InputBase/InputBase.js#L140.

Below is an example of how to turn it back on:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1)
    }
  },
  textarea: {
    resize: "both"
  }
}));

export default function MultilineTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <div>
        <TextField
          id="outlined-textarea"
          label="Multiline Placeholder"
          placeholder="Placeholder"
          multiline
          variant="outlined"
          inputProps={{ className: classes.textarea }}
        />
      </div>
    </form>
  );
}

CSS documentation for resize: https://developer.mozilla.org/en-US/docs/Web/CSS/resize

Multiline TextField demos: https://material-ui.com/components/text-fields/#multiline

Answer 2

You can change the style prop of the TextareaAutosize check here

<TextareaAutosize
  rowsMin={3}
  placeholder=''
  defaultValue=''
  style={{ width: "100%" }}
/>

Answer 3

I was able to get it to work thanks to Ryan Cogswell. Stupid me, though I wrapped the textarea in a box and applied className to the box (which didn't work), I should have applied it to the textareaautosize directly.

There's a bug in VSCODE Intellisense where it shows 'classes' as a property but not 'className' so I assumed it didn't exist.

Here's the code:

const FormStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  button: {
    marginTop: '20px',
    marginRight: theme.spacing(1),
  },
  buttons: {
    display: 'flex',
    justifyContent: 'flex-end'
  },
  textarea: {
    width: '100%',
  },
}));

  <TextareaAutosize
    rowsMin={3}
    aria-label={info.label}
    name={info.name}
    placeholder=''
    defaultValue=''
    className={classes.textarea}
    />

I could not get the drag icon to show up in textfield, so didn't use it. But I would appreciate an example of textfield using multiline and resizing.

Thanks Ryan!

Answer 4

Here's the trick I used. I wrapped it in a flex container and used align-items to stretch the width to cover the size of that container.

            <Stack
                direction="column"
                justifyContent="center"
                alignItems="stretch"
                spacing={2}
            >
                  <TextareaAutosize
                    label='Title'
                    value={pub.title || ''}
                    onChange={(e) => pub.title = e.target.value}
                    variant='outlined'
                    sx={{m: 1}}
                    size='small'
                  />
            </Stack>