how to expand TextField to full width in the grid container?

Question

The TextField component is not drawn to full width while the Paper component is drawn to full width. Does somebody have any idea?

<Grid container spacing={2} className={classes.grid}>
  <Grid item xs={12} md={6}>
    <TextField id="outlined-basic" label="Outlined" variant="outlined" />
  </Grid>

  <Grid item xs={12} md={6}>
    <Paper className={classes.paper}>2</Paper>
  </Grid>

  <Grid item xs={4}>
    <Paper className={classes.paper}>6</Paper>
  </Grid>

  <Grid item xs={4}>
    <Paper className={classes.paper}>7</Paper>
  </Grid>

  <Grid item xs={4}>
    <Paper className={classes.paper}>8</Paper>
  </Grid>
</Grid>

Answer 1

Set fullWidth to true in your TextField. You can see all Input props here for more reference.

<Grid item xs={12} md={6}>
  <TextField
    fullWidth
    id="outlined-basic"
    label="Outlined"
    variant="outlined"
  />
</Grid>

Live Demo