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

13
votes

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.

5
javascriptreactjsmaterial-ui
When you say ,"does not satisfy my current need", can you clarify what exactly your needs are? Do you need to have the label color and hover color to be different things? – lawls544
Yes, the label color needs to be different that button background color on hover. – embolden

5 Answers

2
votes

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

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

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

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.

0
votes

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>
-4
votes

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.