如何在 Material-UI 中为 TextAreaAutoSize 组件设置宽度？

Question

我在任何地方都找不到有关如何更改 material-ui 中 TextAreaAutosize 组件的默认宽度的任何信息。

似乎唯一的选择就是拥有这个小盒子。有谁知道我可以使用更好的文本区域自动调整大小组件，或者如何更改 TextAreaAutoSize 组件的宽度？

API 不显示任何与“className”有关的属性。我无论如何都尝试使用它，但它被忽略了。我还尝试将组件包装在一个 Box 中，并为其设置样式，但它被 TextArea 忽略了。

任何帮助将不胜感激！

Answer 1

用户调整大小已关闭（通过resize: "none"）：TextFieldhttps : //github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui/src/InputBase/InputBase.js# L140。InputBase

以下是如何重新打开它的 v4 示例：

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

这是 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 文档：https ://developer.mozilla.org/en-US/docs/Web/CSS/resize

多行文本字段演示：https://mui.com/material-ui/react-text-field/#multiline

Answer 2

您可以在此处更改 TextareaAutosize 检查的 style 属性

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