javascript - Is it possible to add a custom hover color to Raised Buttons? -
working on project using material-ui library of components , i've gotten request custom button hover color outside of normal convention of mui theme.
i found relevant block of code in raised button source, https://github.com/callemall/material-ui/blob/master/src/raisedbutton/raisedbutton.js#l98. setting custom labelcolor change hover state, still not satisfy current need have button hover color different of label color.
overlay: { height: buttonheight, borderradius: borderradius, backgroundcolor: (state.keyboardfocused || state.hovered) && !disabled && fade(labelcolor, amount), transition: transitions.easeout(), top: 0, },
is there way override overlay background color other way can use separate custom color?
to clarify i'm looking using inline styling or through overriding prop on button. appending class , using external css not option.
i able solve giving classname
prop raisedbutton
component , specifying :hover
attribute in css !important
directive.
in component:
... <raisedbutton classname="my-button" /> ...
in css:
.my-button :hover { background-color: blue !important; }
Comments
Post a Comment