Is it possible to add a custom hover color to Raised Buttons?

Question

Working on a project that is using the Material-UI library of components and I've gotten a request for a custom button hover color that is outside of the normal convention of the MUI theme.

I found this relevant block of code in the Raised Button source, https://github.com/callemall/material-ui/blob/master/src/RaisedButton/RaisedButton.js#L98. Setting a custom labelColor does change the hover state, but that still does not satisfy my current need to have the button hover color something different than that of the label color.

overlay: {
  height: buttonHeight,
  borderRadius: borderRadius,
  backgroundColor: (state.keyboardFocused || state.hovered) && !disabled &&
    fade(labelColor, amount),
  transition: transitions.easeOut(),
  top: 0,
},

Is there a way to override the overlay background color some other way so that I can use a separate custom color?

To clarify I'm looking to do this using inline styling or through overriding a prop on the button. Appending a class and using external CSS is not an option.

Answer 1

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;
}