React 如何扩大间距

Question

我正在使用来自@material-ui 的 Grid 来显示我的数据。在这个网格中，我有多个其他网格，每个代表一个不同的部分。我使用了 Grid 的 container spacing 属性，并给了它可能的最大值 (40) ，但我需要间距更大一些，我不知道该怎么做..

  <Paper className={this.props.classes.root}>
  <Grid container spacing={40} >
    <Grid item sm={6}>
      ..
    </Grid>
    <Grid item sm={2}>
      ..
    </Grid>
    <Grid item sm={4}>
    ..
    </Grid>
  </Grid>
  </Paper>

如何扩大间距？

Answer 1

通常spacing 道具会在网格中的元素之间添加填充。因此您可以使用className 或inline 样式来实现元素之间的填充。

下面给出内联样式的示例代码。

<Grid container >
    <Grid item sm={6} style={{padding:'30px'}}>
      ..
    </Grid>
    <Grid item sm={2} style={{padding:'30px'}}>
      ..
    </Grid>
    <Grid item sm={4} style={{padding:'30px'}}>
    ..
    </Grid>
  </Grid>