Question

我有一个浮动动作按钮，其下面嵌有一个SVG图标，但它不在FAB的子道具中。只要鼠标悬停在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

更改悬停颜色也会导致动画效果有点时髦。我不认为我会建议尝试修改一个而不会弄乱另一个。

如果你确实想要走这条路，那么你的变化就足以让它不再是物质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悬停颜色

1 个答案: