存在指定物料组件ClickAwayListener
您可以像这样添加鼠标离开事件处理程序

<ClickAwayListener mouseEvent="onMouseDown" onClickAway={handleDropdownClickAway}>{your menu code}</ClickAwayListener>

请添加react钩子调用useState并初始化为false。然后在下拉菜单中添加一个鼠标悬停时状态设置为true的按钮。（False和true可以显示下拉菜单）

对于这种情况，我使用onBlur，有同样的问题，添加onBlur事件到您的菜单组件

onBlur={() => {
   setproject(null);
}}

通常我有一个常量，它的值可以决定是否显示下拉菜单，下面是我在项目中的做法。

const [showOptions, setShowOptions] = React.useState<boolean>(false)
const showOption = (): void => {
    setShowOptions(!showOptions)
}

const onBlur = (): void => {
    setShowOptions(false)
}

const onMouseDown = (): void => {
    setShowOptions(false)
}

// here adding all events to your menu
// if u decide to use a constant to tell u to show dropdown, than pass showOptions as a prop inside YourMenu compoennt and hide show your dropdown using showOptions constant
<YourMenu                    
    onClick={showOption}
    onKeyDown={showOption}
    onBlur={onBlur}
    showOptions={showOptions} // prop to show hide your dropdown
 >

您可以将div添加为Button和Menu的容器，并向其中添加att.onMouseLeave。

<div>
    {menuItem.map((text) => (
       <div key={text}
            style={{ display: 'inline-block' }}
            onMouseLeave={() => setproject(null)}    // <== Here
       >
            <Button               
                onClick={(e) => handleChangeMenu(text, e)}
                onMouseOver={(e) => handleHover(text, e)}
                id={text}                            // <== Here
            >
                {text}            
             </Button>
             <Menu
                 transitionDuration={700}
                 anchorEl={project}
                 open={Boolean(anchorElBtn) && anchorElBtn.id === text}     // <== Here
                 onClose={() => {
                   setproject(null);
                 }}
            >
              {mySubMenu.map((text) => (
                <MenuItem sx={menuItemStyle}>{text}</MenuItem>
              ))}
            </Menu>
       </div>
   ))}
</div>