如何使TextField输入更宽？

Question

我有以下代码：

<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样式，没有任何效果。我在这里做什么错了？

Answer 1

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

  

如果为true，则输入将占用其容器的整个宽度。

在这种情况下，TextField容器为FormControl，并且计算FormControl宽度以包含其子级。
如果也将FormControl设置为fullWidth，则将获得所需的内容：

  <FormControl fullWidth>