React Material-UI Cookbook

How to do it...

Let's say that you have four Paper components to render in a grid. Inside each of these Paper components, you have three Chip components, which are nested grid items.

Here's what the code looks like:

import React from 'react';import { withStyles } from '@material-ui/core/styles';import Paper from '@material-ui/core/Paper';import Grid from '@material-ui/core/Grid';import Chip from '@material-ui/core/Chip';const styles = theme => ({  root: {    flexGrow: 1  },  paper: {    padding: theme.spacing(2),    textAlign: 'center',    color: theme.palette.text.secondary  }});const FillingSpace = withStyles(styles)(({ classes, justify }) => (  <div className={classes.root}>    <Grid container spacing={4}>      <Grid item xs={12} sm={6} md={3}> <Paper className={classes.paper}> ...