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!

Cyd

can you please provide codesandbox link ? – Wildlife

TextareaAutosize is a low-level utility component. I would recommend that you use TextField instead (which leverages TextareaAutosize for some cases): material-ui.com/components/text-fields/#multiline. – Churchly

If you do want to use TextareaAutosize, the className prop should work fine since it will be passed along to the textarea. – Churchly

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 a v4 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>
  );
}

Here's an equivalent example for v5:

import React from "react";
import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";

const StyledForm = styled("form")(({ theme }) => ({
  "& .MuiTextField-root": {
    margin: theme.spacing(1)
  }
}));
const StyledTextField = styled(TextField)`
  textarea {
    resize: both;
  }
`;

export default function MultilineTextFields() {
  return (
    <StyledForm noValidate autoComplete="off">
      <div>
        <StyledTextField
          id="outlined-textarea"
          label="Multiline Placeholder"
          placeholder="Placeholder"
          multiline
          variant="outlined"
        />
      </div>
    </StyledForm>
  );
}

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

Multiline TextField demos: https://mui.com/material-ui/react-text-field/#multiline

Churchly

Wow. You're right. That's a much better textarea in the end. Thanks Ryan! – Cyd

Do you know a similar solution for @mui/material? Thanks! – Idola

@CalinVlasin The approach is the same aside from replacing the deprecated makeStyles API with a different styling solution. I've added a v5 example. – Churchly

Answer 2

You can change the style prop of the TextareaAutosize check here

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

Lashoh

Answer 3

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>

Purposive

Answer 4

It depends on your parent div. If your width is smaller than that, it crashes and gives that error. Just make sure that your width of your TextAreaInput Is not smaller than the parent div.

Reporter

Answer 5

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!

Cyd