How to make TextField input wider?

Question

I have the following code:

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

And this renders:

The reason I'm using Grid is because I wanted to center the form, as suggested from the answers here.

No matter what I do, I can't get the TextField to change width. I've added it into a Container, I've added the width style, nothing works. What am I doing wrong here?

score 2 · Accepted Answer · answered Oct 05 '19 at 12:02

According to Material-UI TextField docs, fullWidth prop:

If true, the input will take up the full width of its container.

The TextField container in this case is FormControl, and the FormControl width is calculated to contain it's children.
If you set FormControl to fullWidth as well, you will get what you want:

  <FormControl fullWidth>

How to make TextField input wider?

1 Answers1