如何关闭material UI上下文菜单，而不显示默认的上下文菜单？

Posted 2023-02-04

我试图使用材质UI菜单在div上显示一个上下文菜单，如 https:/material-ui.comcomponentsmenus#context-menu。

这工作我可以右键单击，它显示。

然而，显示时的material-ui上下文菜单是 在菜单后面注入一个透明的div，覆盖整个屏幕。. 这意味着任何进一步的点击都会被这个元素拦截。当检测到左键点击时，该元素似乎会关闭菜单，但会移动并继续显示出 同一上下文菜单 如果你在页面上的其他地方右键单击，包括上下文菜单无关的地方。

有什么办法可以在没有这个透明div的情况下显示菜单，因为它正在从我的页面中移除控制？

你可以在例子中看到这个动作。https:/material-ui.comcomponentsmenus#context-menu。右键点击文本，然后右键点击其他任何地方（当菜单仍在显示时），你可以触发菜单出现在整个页面上，甚至在应用栏中，菜单选项没有意义。

答案

我试着这样做。

export default function MenuPopupState() 
  return (
    <PopupState variant="popover" popupId="demo-popup-menu">
      popupState => 
        const menuProps = bindMenu(popupState);
        return (
          <React.Fragment>
            <Button
              variant="contained"
              color="primary"
              ...bindTrigger(popupState)
            >
              Open Menu
            </Button>
            <Menu
              ...menuProps
              onContextMenu=event => 
                event.preventDefault();
              
              onMouseDown=e => 
                menuProps.onClose();
              
            >
              <MenuItem onClick=popupState.close>Cake</MenuItem>
              <MenuItem onClick=popupState.close>Death</MenuItem>
            </Menu>
          </React.Fragment>
        );
      
    </PopupState>
  );

https:/codesandbox.iosmaterial-demo-szpbr?file=demo.js。