Как сделать ввод 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 потому, что я хотел центрировать форму, как подсказывает ответ здесь .

. Что бы я ни делал, я не могу заставить TextField изменить ширину. Я добавил его в Container, я добавил стиль width, ничего не работает. Что я здесь не так делаю?

Answer 1

В соответствии с документами Material-UI TextField, fullWidth prop:

Если true, вход будет занимать всю ширину своего контейнера.

Контейнер TextFieldв этом случае FormControl, и ширина FormControl рассчитывается, чтобы содержать его дочерние элементы. Если вы также установите FormControl на полную ширину, вы получите то, что вы хотите:

  <FormControl fullWidth>