css 当Material UI(MUI)Select Menu打开时,无法与屏幕上的任何内容交互

xe55xuns  于 2023-08-09  发布在  其他
关注(0)|答案(1)|浏览(102)

我在我的网络应用程序中使用Material UI的Select组件。我注意到,当选择组件的菜单打开时,我无法与屏幕上的任何其他内容交互。我不能点击其他对象,悬停事件不会触发,我甚至不能滚动,直到菜单关闭。
Material UI似乎有一个不可见的背景,当打开选择菜单时会弹出,迫使用户在与其他任何东西交互之前关闭该菜单。然而,我试图实现一个功能,即当下拉菜单打开时,用户仍然可以与应用程序的其他部分进行交互(例如,在Uber网站的主页中-导航栏中的“公司”下拉菜单将允许您在打开时做其他事情)。

**有没有办法禁用或解决这个不可见的背景?**我试图将其他所有内容的z指数设置为高于背景的z指数,但这很笨拙,不可持续,并不总是有效。
编码/演示:https://codesandbox.io/s/practical-ully-fsfgpj

如果有一个强有力的方法来解决这个问题,那就太棒了。

fzwojiic

fzwojiic1#

如果您需要这样的组件,则不需要使用Select
Select组件使用Menu组件在下拉菜单中呈现选项列表。
根据文件:
Menu组件在内部使用Popover组件。但是,您可能希望使用不同的定位策略,或者不要阻止滚动。为了满足这些需求,我们公开了一个可以组合的MenuList组件,在本例中使用了Popper。
您可以使用Popper代替Select
举例来说:

<Button
  ref={anchorRef}
  id="composition-button"
  aria-controls={open ? "composition-menu" : undefined}
  aria-expanded={open ? "true" : undefined}
  aria-haspopup="true"
  onClick={handleToggle}
>
  Dashboard
</Button>
<Popper
  open={open}
  anchorEl={anchorRef.current}
  role={undefined}
  placement="bottom-start"
  transition
  disablePortal
>
  {({ TransitionProps, placement }) => (
    <Grow
      {...TransitionProps}
      style={{
        transformOrigin:
          placement === "bottom-start" ? "left top" : "left bottom"
      }}
    >
      <Paper>
        <MenuList
          autoFocusItem={open}
          id="composition-menu"
          aria-labelledby="composition-button"
          onKeyDown={handleListKeyDown}
        >
          <MenuItem onClick={handleClose}>Profile</MenuItem>
          <MenuItem onClick={handleClose}>My account</MenuItem>
          <MenuItem onClick={handleClose}>Logout</MenuItem>
        </MenuList>
      </Paper>
    </Grow>
  )}
</Popper>

字符串
你可以从上面的文档中得到完整的代码。

相关问题