Is it possible to add a custom hover color to Rais

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

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

<RaisedButton 
   label="Default" 
   hoverColor={"#00ff00"} 
/>

Answer 2

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

Answer 3

Fairly easy solution :

.yourButtonClass{
  color: aColor !important;
  &>span{
    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>
</md-button>

Answer 4

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

<div
  ref="overlay"
  style={prepareStyles(Object.assign(styles.overlay, overlayStyle))}
>
  {enhancedButtonChildren}
</div>

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.

Answer 5

You can use jquery to simply remove class and addClass

jQuery(document).ready(function($){
  $('#test').hover(
     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.