There's more...

You can change the alignment of the items in the CardActions component. Since it uses flexbox as its display, you can use any of the justify-content values. Here's an updated version that aligns the action buttons to the right of the card:

const styles = theme => ({  card: {    maxWidth: 400  },  actions: {    justifyContent: 'flex-end'  }});const PerformingActions = withStyles(styles)(({ classes }) => (  <Card className={classes.card}>    <CardHeader      title="Ron Swanson"      subheader="Legend"      avatar={        <Avatar>          <PersonIcon />        </Avatar>      }    />    <CardContent>      <Typography variant="caption">Joined 2009</Typography>      <Typography>        Some filler text about the user. There doesn't have to be a lot - just enough so that the text spans at least two lines. ...

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.