反应如何扩大间距

Question

I'm using Grid from @material-ui to display my data . Inside this Grid, I have multiple other grids, each represent a different section . I've use container spacing attribute of Grid, and gave it the max value possible (40) , but I need the spacing to be a litter bigger, and I can't figure how to do it..

  <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>

How can I expand the spacing ?

Answer 1

Normally spacing props add padding between the elements in the grid. so you can use the className or inline style to achieve padding between elements.

Sample code give below for inline style.

<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>