React Material-UI Cookbook

There's more...

You can rearrange your card items in a way that makes the most sense for your app. For example, your card with media might not have any content and you might want to display the header text at the bottom of the card, below the media, and with the text centered. Here's the modified code:

const styles = theme => ({  card: {    maxWidth: 322  },  media: {    width: 322,    height: 322  },  header: {    textAlign: 'center'  }});const PresentingMedia = withStyles(styles)(({ classes }) => (  <Card className={classes.card}>    <CardMedia      className={classes.media}      image="https://interactive-grapefruit-slice-332-332.jpg"      title="Grapefruit"    />    <CardHeader      className={classes.header}      title="Grapefruit"      subheader="Red"    />  </Card>));export default PresentingMedia; ...