Button variants

The Material-UI Button component exists as one of three variants. These are as follows:

• Text
• Outlined
• Contained

How to do it...

Here's some code that renders three Button components, each explicitly setting their variant property:

import React from 'react';

import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';

const styles = theme => ({
  container: {
    margin: theme.spacing(1)
  }
});

const ButtonVariants = withStyles(styles)(({ classes }) => (
  <Grid
    container
    direction="column"
    spacing={2}
    className={classes.container}
  >
    <Grid item&gt...