我在我的网络应用程序中使用Material UI的Select组件。我注意到,当选择组件的菜单打开时,我无法与屏幕上的任何其他内容交互。我不能点击其他对象,悬停事件不会触发,我甚至不能滚动,直到菜单关闭。
Material UI似乎有一个不可见的背景,当打开选择菜单时会弹出,迫使用户在与其他任何东西交互之前关闭该菜单。然而,我试图实现一个功能,即当下拉菜单打开时,用户仍然可以与应用程序的其他部分进行交互(例如,在Uber网站的主页中-导航栏中的“公司”下拉菜单将允许您在打开时做其他事情)。
**有没有办法禁用或解决这个不可见的背景?**我试图将其他所有内容的z指数设置为高于背景的z指数,但这很笨拙,不可持续,并不总是有效。
编码/演示:https://codesandbox.io/s/practical-ully-fsfgpj
如果有一个强有力的方法来解决这个问题,那就太棒了。
1条答案
按热度按时间fzwojiic1#
如果您需要这样的组件,则不需要使用
Select
。Select
组件使用Menu
组件在下拉菜单中呈现选项列表。根据文件:
Menu组件在内部使用Popover组件。但是,您可能希望使用不同的定位策略,或者不要阻止滚动。为了满足这些需求,我们公开了一个可以组合的MenuList组件,在本例中使用了Popper。
您可以使用
Popper
代替Select
。举例来说:
字符串
你可以从上面的文档中得到完整的代码。