Material-UI FAB 悬停颜色

Question

我有一个浮动操作按钮，下面嵌套了一个 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 浮动操作按钮。这很好，但接受这个事实。获取 FAB 代码（可在此处找到：https://github.com/callemall/material-ui/blob/master/src/FloatingActionButton/FloatingActionButton.js）并根据自己的喜好对其进行调整，使其成为您自己的代码。

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

Material-UI FAB 悬停颜色

Material-UI FAB Hover Color

javascript

reactjs

material-design

material-ui