Overriding Button Styles and Hover Effects - Material UI

CSSGuidesReactJSWeb Development

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;


      

1 comment

Comments from the original blog are preserved here. New comments are closed.

  1. abd

    wow wtf this worked really well