reactjs - 如何在网格容器中将 TextField 扩展到全宽？

Question

TextField 组件未绘制到全宽，而Paper 组件被绘制到全宽。有人知道吗？

<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

在 TextField 中将 fullWidth 设置为 true。你可以看到所有 Input Prop here供更多引用。

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

现场演示