如何使 TextField 输入更宽？

Posted 2023-02-22

【中文标题】如何使 TextField 输入更宽？

【英文标题】：How to make TextField input wider?

【发布时间】：2020-02-03 10:44:33

【问题描述】：

我有以下代码：

<Grid
  container
  spacing=0
  direction="column"
  alignItems="center"
  justify="center"
  style= minHeight: "100vh" 
>
  <FormControl>
    <TextField
      label="email"
      fullWidth
      type="email"
      value=email
      onChange=e => setEmail(e.target.value)
    ></TextField>
    <TextField
      label="body"
      type="body"
      fullWidth
      value=body
      onChange=e => setBody(e.target.value)
      multiline=true
    ></TextField>
  </FormControl>
</Grid>

这会呈现：

我使用Grid 的原因是因为我想使表单居中，正如答案here 所建议的那样。

无论我做什么，我都无法让 TextField 改变宽度。我已将其添加到 Container 中，我已添加 width 样式，但没有任何效果。我在这里做错了什么？

【参考方案1】：

根据 Material-UI TextField 文档，fullWidth 属性：

如果为真，输入将占据其容器的整个宽度。

在这种情况下，TextField 容器是 FormControl，并且 FormControl 的宽度被计算为包含它的子项。 如果你也将 FormControl 设置为 fullWidth，你会得到你想要的：

  <FormControl fullWidth>