You can use jquery to simply remove class and addClass

     function(){ $(this).addClass('redclass') },
     function(){ $(this).removeClass('overlay') }

'#test represent the id and .test represent the class of the element you're trying to manipulate.


For raised button use this prop hoverColor so it will be something like



In the render function of the RaisedButton, the overlay style object is overridden with the overlayStyle prop. (The relevant excerpt is below).

  style={prepareStyles(Object.assign(styles.overlay, overlayStyle))}

This means you can set the background color by setting the backgroundColor of the overlayStyle prop. I think the second piece of the puzzle is to set the onMouseLeave and onMouseEnter events, and manage the current background color yourself, by changing the color whenever the mouse enters or leaves the button area.

Unfortunately, it looks like the keyboard focus events don't have a hook exposed in the MaterialUI API, so you won't be able to handle that case without modifying the library.

This might be something worth submitting a pull request to MaterialUI if you go the route of modifying the library.


Fairly easy solution :

  color: aColor !important;
    color: anotherColor;

You apply the color to your button which change the label and the overlay color, and then you put your label in a span for which you specify whatever color you want the text to be. That way your background, label and overlay can be different colors :)

can also be written in the style attribute of the respective tags:

<md-button class="md-raised" style="color: aColor !important">
    <span style="color: anotherColor">yourLabel</span>


I was able to solve it by giving a className prop to RaisedButton component and specifying :hover attribute in css with !important directive.

In your component:

<RaisedButton className="my-button" />

In your css:

.my-button :hover {
  background-color: blue !important;

Related Query

More Query from same tag