javascript - Material -UI FAB 悬停颜色

Question

我有一个 float 操作按钮，其下方嵌套有一个 SVG 图标，但它不在 FAB 的 Children 属性中。每当鼠标悬停在 FAB/SVG 图标上时，FAB 就会变为浅灰色。我看了https://github.com/callemall/material-ui/issues/894和其他一些来源，发现悬停颜色是 SVG 图标颜色的 40%。

是否可以删除悬停功能以便不发生颜色变化，或者是否可以更改悬停产生的颜色以匹配我的 FAB 的颜色？

我的目标是让用户能够让鼠标进入和退出 FAB/SVG 图标区域而不改变颜色。

这是我正在使用的代码片段:

<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
    ...

Answer 1

更改悬停颜色也会导致动画效果有点奇怪。我不认为我会建议尝试修改一个而不干扰另一个。

如果您确实想走这条路，那么您所做的更改就足够了，它不再是material-ui float 操作按钮。这很好，但要接受这个事实。获取 FAB 代码(此处找到: https://github.com/callemall/material-ui/blob/master/src/FloatingActionButton/FloatingActionButton.js )并根据您的喜好进行调整，使其成为您自己的代码。

但是，如果您想删除按钮的所有交互方面，我建议仅使用圆形纸张元素( http://www.material-ui.com/#/components/paper )。它支持 onClick 和任何背景颜色就好。