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

Question

我正在尝试使用材质 UI 菜单在 div 上显示上下文菜单，如https://material-ui.com/components/menus/#context-menu中所示

这有效，我可以右键单击并显示它。

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

有没有办法在没有这个透明 div 的情况下显示菜单，该透明 div 会从我的页面中删除控制？

您可以在示例中看到此操作： https: //material-ui.com/components/menus/#context-menu 右键单击​​文本，然后右键单击其他任何位置（当菜单仍然显示时）可以触发菜单出现在整个页面上，甚至在应用栏中，菜单选项没有任何意义。

Answer 1

我尝试这样做：

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.io/s/material-demo-szpbr?file=/demo.js