next.js 材料-ui弹出状态弹出框不工作

xa9qqrwz 于 2023-06-05 发布在其他

关注(0)|答案(2)|浏览(274)

我使用material-ui-popup-state包在我的头上添加自定义菜单。我使用的代码与文档中的代码类似。不同之处仅在于Popover的内容。我的有几张卡片的内容和一些造型的背景。在我的标题中有两个这样的弹出框，每个都有自己的触发器。
问题是弹出框并不总是按预期的方式工作，当用户将鼠标悬停在弹出框的内容上时，弹出框就会关闭。该行为不一致，并且是间歇性的。我观察到的一个模式是，当一个人从一个弹出框的内容移动到触发另一个弹出框的按钮时，这种情况最常见。
这是否是已知问题，是否有解决方法？
Sample code

next.js

来源：https://stackoverflow.com/questions/65685288/material-ui-popup-state-popover-not-working

2条答案

按热度按时间

gjmwrych1#

我自己解决的。为任何寻找答案的人发帖。

<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 />相互干扰。

赞(0）回复(0）举报 2023-06-05

5tmbdcev2#

你必须安装这个包：
npm install material-ui-popup-state
来源：https://copypaste.guru/WhereIsMyJavascriptModule/how-to-fix-module-not-found-can-t-resolve-material-ui-popup-state

赞(0）回复(0）举报 2023-06-05