Material UI - 菜单组件锁定了页面的滚动条。

Question

我使用Material-ui Menu组件制作了一个下拉菜单。

问题在于一旦打开下拉菜单，页面的滚动条会消失，无法滚动页面。

我尝试寻找答案，但似乎只有针对Popper、Popover或Select组件的解答，而没有针对Menu组件的解答。

DropDownMenu组件如下所示。

import React from 'react'
import Menu from '@material-ui/core/Menu'
import MuiMenuItem from '@material-ui/core/MenuItem'
import styled from 'styled-components'
import MoreVertIcon from '@material-ui/icons/MoreVert'
import IconButton from '@material-ui/core/IconButton'

import SendIcon from '@material-ui/icons/Send'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'

const MenuItem = styled(MuiMenuItem)`
  justify-content: flex-end;
`

export default function DropDownMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null)

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  return (
    <div>
      <IconButton
        style={{ padding: 0 }}
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <MoreVertIcon style={{ fontSize: 15 }} />
      </IconButton>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        <MenuItem onClick={handleClose}>
          <ListItemIcon>
            <SendIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Sent mail" />
        </MenuItem>
        <MenuItem onClick={handleClose}>
          <ListItemIcon>
            <SendIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Sent mail" />
        </MenuItem>
        <MenuItem onClick={handleClose}>
          <ListItemIcon>
            <SendIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Sent mail" />
        </MenuItem>
      </Menu>
    </div>
  )
}

将代码修改为菜单道具的方式如下。

<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
  getContentAnchorEl={null}
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
  <MenuItem onClick={handleClose}>
    <ListItemIcon>
      <SendIcon fontSize="small" />
    </ListItemIcon>
    <ListItemText primary="Sent mail" />
  </MenuItem>

工作示例可以在此处查看：https://codesandbox.io/s/billowing-cache-042j1?file=/src/App.js。提前致谢。

- kimiro

Answer 1

将disableScrollLock属性设置为true。这个属性来自于Material UI的Modal组件，但也适用于Menu组件。

<Menu
  ...others
  disableScrollLock={true}
>

</Menu>

- Tammibriggs

Answer 2

您应该使用Popper而不是Menu。还应创建引用，并将其用于IconButton或Button。

import React from 'react'
import ClickAwayListener from '@material-ui/core/ClickAwayListener'
import Grow from '@material-ui/core/Grow'
import Paper from '@material-ui/core/Paper'
import Popper from '@material-ui/core/Popper'
import MenuItem from '@material-ui/core/MenuItem'
import MenuList from '@material-ui/core/MenuList'
import IconButton from '@material-ui/core/IconButton'

import MoreVertIcon from '@material-ui/icons/MoreVert'

import SendIcon from '@material-ui/icons/Send'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'


export default function DropDownMenu(props) {
    const [open, setOpen] = React.useState(false)
    const anchorRef = React.useRef(null)

    const handleToggle = () => {
        setOpen((prevOpen) => !prevOpen)
    }


    const handleClose = (event) => {
        if (anchorRef.current && anchorRef.current.contains(event.target)) {
            return
        }

        setOpen(false)
    }

    function handleListKeyDown(event) {
        if (event.key === 'Tab') {
            event.preventDefault()
            setOpen(false)
        }
    }

    const handleClick = () => {
        // handle menu click here

        setOpen(false)
    }

    return (
        <div>
            <IconButton
                ref={anchorRef}
                aria-controls={open ? 'menu-list-grow' : undefined}
                aria-haspopup="true"
                onClick={handleToggle}
                size="small"
            >
                <MoreVertIcon fontSize="small" />
            </IconButton>
            <Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
                {({ TransitionProps, placement }) => (
                    <Grow
                        {...TransitionProps}
                        style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
                    >
                        <Paper>
                            <ClickAwayListener onClickAway={handleClose}>
                                <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                                    <MenuItem  onClick={handleClick}>
                                        <ListItemIcon>
                                            <SendIcon fontSize="small"/>
                                        </ListItemIcon>
                                        <ListItemText primary="Sent mail" />
                                    </MenuItem>
                                    <MenuItem onClick={handleClick}>
                                        <ListItemIcon>
                                            <SendIcon fontSize="small"/>
                                        </ListItemIcon>
                                        <ListItemText primary="Sent mail" />
                                    </MenuItem>
                                </MenuList>
                            </ClickAwayListener>
                        </Paper>
                    </Grow>
                )}
            </Popper>
        </div>
    )
}

在 Material UI 菜单文档 中还有一个示例代码。

- bonnopc

---

感谢@bonnopc的快速和正确的回答。你的答案完全适用于我，只有一个小错误：IconButton在你的代码中被导入了两次。如果你修复这个问题，我会将你的答案标记为正确的。此外，我可以使用placement属性自定义菜单位置。 - kimiro