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%" }}
/>