反应如何扩大间距

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>