javascript - Is it possible to add a custom hover color to Raised Buttons? - Stack Overflow

admin管理员组

文章数量:1291102

Working on a project that is using the Material-UI library of ponents 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, .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.

Working on a project that is using the Material-UI library of ponents 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./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.

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Oct 12, 2016 at 20:51 Kara 6,2261616 gold badges5353 silver badges5858 bronze badges asked Sep 12, 2016 at 20:16 emboldenembolden 30333 silver badges1111 bronze badges 2

• 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 Commented Sep 14, 2016 at 17:58
• 1 Yes, the label color needs to be different that button background color on hover. – embolden Commented Sep 15, 2016 at 0:32

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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

In your ponent:

...
<RaisedButton className="my-button" />
...

In your css:

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

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

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

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.

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>

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.

本文标签： javascriptIs it possible to add a custom hover color to Raised ButtonsStack Overflow