如何使 TextField 输入更宽？答案

【问题标题】：How to make TextField input wider?如何使 TextField 输入更宽？
【发布时间】：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 样式，但没有任何效果。我在这里做错了什么？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

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

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

  <FormControl fullWidth>

【讨论】：