打开时无法单击 Material-UI Popover 背景下的元素

Question

我无法使用 Material-UI 的 Popover 组件获得这种行为。

我这里有这个代码示例：https : //codesandbox.io/s/88z3nq96jl 查看问题的步骤：

1. 当我单击 Filter1 按钮时，弹出窗口出现。
2. 然后，当我单击 Filter2 按钮时，Filter1 的弹出窗口关闭。
3. 然后，我需要再次单击以显示 Filter2 的弹出窗口。

但是我不想在其中一个弹出窗口打开时单击两次，我需要它关闭前一个并同时打开正确的一个。

我认为背景会阻止点击事件的传播，所以它背后的过滤器永远不会被点击。有什么办法可以避免这种情况吗？

Answer 1

我认为 Material UI 的Popper适合您的情况，从文档来看：

滚动和点击不会像 Popover 组件那样被阻止。弹出窗口的位置会随着视口中的可用区域而更新。

演示：

Answer 2

我正在使用 Material UI 4.11 和 React 16.13。

您可以将 disableEnforceFocus 设置为 true（防止点击被阻止）并禁用根 css 上的指针事件（允许点击通过背景）。

    const styles = makeStyles<Theme>((theme) => ({
        popover: {
          pointerEvents: "none",
        },
    }));


    <Popover  
      classes={{ root: classes.popover}}
      disableEnforceFocus={true}
    >
    </Popover>