Material-ui 弹出状态弹出框不工作

Question

我使用material-ui-popup-state 包在我的标题上添加自定义菜单。我使用的代码类似于the documentation 中的代码。区别仅在于弹出框的内容。我的内容中有一些卡片和一些背景样式。我的标题中有两个这样的弹出框，每个都有自己的触发器。

问题在于，弹出框不会始终按预期运行，并在用户将鼠标悬停在弹出框的内容上时关闭。行为不一致并且是间歇性的。我观察到的一种模式是，当一个弹出框的内容从一个弹出框的内容移动到触发另一个弹出框的按钮时，这种情况最常发生。

这是一个已知问题，是否有任何解决方法？

Sample code

Answer 1

我自己解决了这个问题。为任何寻找答案的人发帖。

<PopupStateController variant="popover" popupId={"label1"}>
          {(popupState) => {
            return popupState.isOpen ?
              <>
                {
                  <Box key={1} {...bindHover(popupState)}>
                    {dispBox}
                  </Box>
                }
                <HoverPopover
                  TransitionComponent={Grow}
                  key={2}
                  {...bindPopover(popupState)}
                  anchorOrigin={{
                    vertical: "bottom",
                    horizontal: "left"
                  }}
                  transformOrigin={{
                    vertical: "top",
                    horizontal: "left"
                  }}
                  PaperProps={{
                    square: true
                  }}
                  TransitionProps={{ timeout: { enter: 500 } }}
                  elevation={1}
                >
                  {popupContent}
                </HoverPopover>
              </>: null
            );
          }}
        </PopupStateController>

我不确定为什么会这样，但它解决了我的问题。我的猜测是，它通过在未打开时从树中删除元素来防止多个 <HoverPopover />s 相互干扰。