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

Question

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

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

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

任何帮助将不胜感激!

Answer 1

resize: "none" 中的 TextField 用户调整大小被关闭(通过 InputBase ): https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui/src/InputBase/InputBase.js#L140 。
下面是如何重新打开它的示例:

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 文档:https://developer.mozilla.org/en-US/docs/Web/CSS/resize
多行文本字段演示:https://material-ui.com/components/text-fields/#multiline