Material-UI FAB Hover Color

Question

I have a floating action button that has an SVG icon nested underneath, though it is not in the children prop of the FAB. Whenever the mouse hovers over the FAB/SVG icon, the FAB changes to a light gray. I looked at https://github.com/callemall/material-ui/issues/894 and a few other sources and found that the hover color is 40% of what the SVG icon color is.

Is it possible to either remove the hover functionality so that there is no color change, or is it possible to change the color that the hovering produces to match that of my FAB?

My goal is for users to be able to have their mouse enter and exit the FAB/SVG icon area and not have a color change.

Here is a snippet of the code I'm working with:

<FloatingActionButton secondary={true} onTouchTap={this.printHandleOpen.bind(this)}>
    <ActionPrint style={styles.actionIcon}/> // This is the SVG icon, setting hoverColor doesn't seem to have any result
    <Dialog
    ...

Jake Haller-Roby Jake Haller-Roby · Accepted Answer · 2016-06-01T16:23:44

Changing the hover color would also cause the animation effect to be a bit funky. I don't think I would recommend trying to modify one without messing with the other.

If you do want to go that route, you're changing enough that it's no longer the material-ui floating action button. Which is fine, but embrace that fact. Take the FAB code (found here: https://github.com/callemall/material-ui/blob/master/src/FloatingActionButton/FloatingActionButton.js) and tweak it to your heart's content to make it your own.

If, however, you want to remove all interactive aspects of the button, I would instead suggest just using a circular paper element (http://www.material-ui.com/#/components/paper). It supports onClick and any background color just fine.

Material-UI FAB Hover Color

1 Answers