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

Question

我在 material-ui.

中找不到任何关于如何更改 TextAreaAutosize 组件的默认宽度的信息

看来只有这个小盒子了。有谁知道我可以使用更好的文本区域自动调整大小组件，或者如何更改 TextAreaAutoSize 组件的宽度？

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

如有任何帮助，我们将不胜感激！

Answer 1

多亏了 Ryan Cogswell，我才能够让它工作。愚蠢的我，虽然我将 textarea 包裹在一个盒子里并将 className 应用于盒子（这没有用），但我应该直接将它应用于 textareaautosize。

VSCODE Intellisense 中有一个错误，它将 'classes' 显示为属性而不是 'className'，所以我假设它不存在。

代码如下：

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

我无法让拖动图标显示在文本字段中，所以没有使用它。但我希望看到使用多行和调整大小的文本字段示例。

谢谢瑞安！

Answer 2

InputBase 中 TextField 的用户调整大小已关闭（通过 resize: "none"）：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

多行 TextField 演示：https://material-ui.com/components/text-fields/#multiline

Answer 3

您可以更改 TextareaAutosize 检查的样式属性 here

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

Answer 4

这是我使用的技巧。我将它包裹在一个 flex 容器中并使用 align-items 拉伸宽度以覆盖该容器的大小。

            <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>

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

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

textarea

reactjs

material-ui