React Popover 组件 - Material UI

Question

我正在尝试制作一个调色板，其功能如下：当我将鼠标悬停在PaletteIcon它应该会弹出调色板，我应该能够根据需要选择颜色。 但是当我尝试选择颜色时悬停后，调色板消失了。 是否有任何属性可以添加到纸质 React 组件或其他一些方法来实现这一点？ 我检查了Paper API 文档，但没有找到任何解决方案。

这是CodeSandbox的链接。

Answer 1

Popover与您的 Button 不在同一棵树中呈现，它不是 Button 的后代，因此这种逻辑很难开箱即用。

您可以删除onMouseLeave事件并在选择颜色后关闭 Popover。 或者您可以通过单击按钮来控制弹出窗口。

或者您可以将自定义 Popover 添加为 Button 元素的子元素，因此悬停将保留在父元素上。

Answer 2

TL;DR：删除pointerEvents: "none"以从弹出框内容中监听事件，删除锚点 (Fab) onMouseLeave并在悬停（ onMouseEnter 、 onMouseLeave ）其内容或弹出onMouseLeave背景时控制弹出onMouseEnter 。

NL;PR：我修改了你的 Pastebin 以反映这一 变化。 或者，您可以选择使用状态管理 API ）。