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

user_13746224 0
Viewed 3494

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>
material-ui reactjs textfield
1 Answers

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

Edit 64215994/how-to-fit-text-field-elements-into-the-grid-container-using-material-ui

user_94494260
Related