Overriding Button Styles and Hover Effects – Material UI

Hi everyone,

Just a quick post on how to override the background color and hover effects for buttons in material ui:

Define your class as follows:

const styles = theme => ({
    greenButton: {
        backgroundColor: green[500],
        color: '#FFF',
        '&:hover': {
            backgroundColor: green[400],
            color: '#FFF'

Then just reference it as you normally would:

const styles = theme => ({
const { classes } = this.props;
<Button size="small" className={classes.greenButton} variant="raised">
      <AddShoppingCartIcon />

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.