时间戳

首页 > 解决方案 > 当 `open` 属性设置为 `true` 时，Material-UI Popper 仍然可见

reactjs - 当 `open` 属性设置为 `true` 时，Material-UI Popper 仍然可见

问题描述

我正在使用 Material-UIPopper 组件并将其与keepMounted道具集一起使用。

我遇到的问题是，当 Popper 的组件open道具是 falsepopper 超出窗口边界但仍然可见时。

问：open当 Popper 组件为 false时，我应该使用什么方法来确保 popper 不可见/不显示？我已经调查过了（有关更多详细信息，请参见下文），但没有成功。

我在这里设置了一个小的复制和示例代码： https ://codesandbox.io/embed/389w75jpom

当工具提示/弹出器“未显示”时滚动到底部并注意它仍然可见。单击该按钮可切换 Popper 组件open属性的值。

我希望 popper在仍在使用时open被隐藏。我希望它根本不显示（例如），而不仅仅是消失在视线之外。falsekeepMounteddisplay: none

从 Material-UI 文档中，我看到popper.js可以使用modifiersprop 传递修饰符并专门查看modifiers~hide。在文档中提到了hide修饰符：

[...] 将设置一个x-out-of-boundaries属性，当它的引用超出边界时，该属性可用于使用 CSS 选择器隐藏弹出器。

根据文档，默认情况下应启用此修饰符，但似乎该x-out-of-boundaries属性似乎根本没有应用于popper 容器div。所以在这种情况下，我无法依赖 CSS 选择器。

我还发现了这个 GH 问题，我认为它导致了hide修改器的实施。

我尝试将 [1] 传递给修饰符，该hidePopper函数类似于此处同一 GH 问题中建议的函数，以检测 popper 何时进出边界并相应地设置其样式。这是前一个 repro 的一个分支，更新了代码以反映这一点： https ://codesandbox.io/embed/jvr6oy95j3

但是在此处测试时传递给函数 boundaries的对象上不存在该属性（请参阅控制台日志）： https ://jvr6oy95j3.codesandbox.io/data

抱歉，如果我遗漏了什么，并且非常感谢您对此提供任何指导。谢谢

[1] 通过hide.fn修饰符属性。

标签： reactjsmaterial-uipopper.js

解决方案

推荐阅读