Material-UI [v0.x] RaisedButton on hover styles

Question

I'd like to change the styling of a Material-UI RaisedButton on hover, but it seems like there is no specific option to do that, as what happens on hover is sort of defined by material design guidelines.

Nevertheless, is there any way to change a button's styling (mainly color and background-color) when hovering over them?

I see m-ui is using a lot of different layers for their buttons, and currently adds a white transparent background on top of the button so that it performs well with all theme colours.

(To be more precise, I'd like to invert the colours between the colour and background-color.)

Answer 1

Sorry for a late answer, but maybe this will help someone else. Material-ui supports media queries like this (at least with 1.0):

const styles = {
  button: {
    padding: '10px',
    '&:hover': {
      background: 'blue'
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      padding: '20px'
    }
  }
}

This example and more can be found from Mark Dalgleish's post about unified styling language.

Answer 2

 linkLabel:{
    fontSize: 14,
    color: '#2bd5c6',
    '&:hover': {
      color: '#2bd5c6 !important',
    }
  }

sometimes 'hover' styles not applying even though you applied. U can achieve using '!important'.

<a href="#" className={classes.linkLabel}> {'Link content'}</a>