如何更改蓝图菜单项的默认行为？答案

【问题标题】：How can I change default behavior of blueprint's menu item?如何更改蓝图菜单项的默认行为？
【发布时间】：2020-12-05 01:27:07
【问题描述】：

对于我的 react 项目的菜单，我使用了来自 '@blueprintjs/core' 的 MenuItem 如图所示，当我悬停有子项的菜单项时，它们从右侧打开。有没有办法改变它并在其父项下打开子子菜单？

这是我的代码`

import React from 'react';
import { MenuItem } from '@blueprintjs/core';
import Style from './styled';

const leftMenu = () => {

const Items = createNav.map(menuItem => {
    let children;
    if ('children' in menuItem) {
        children = menuItem.children.map(child => {
            return (
                <MenuItem
                    icon={child.icon}
                    text={child.title}
                    href={child.path}
                    key={menuItem.path}
                    />
                );
            });
        }
        return (
            <Style.MenuItem
                icon={menuItem.icon}
                text={menuItem.title}
                href={menuItem.path}
                key={menuItem.path}
            >
                {children}
            </Style.MenuItem>
        );
    });
    return <Style.Menu>{Items}</Style.Menu>;
};

export default LeftMenu;

对于样式我使用 styled-components

 const Menu = styled(bpMenu)`
     padding: 0 !important;
     background-color: transparent !important;
`;

const MenuItem = styled(Item)`
     background-color: red ;
     margin: 5px;
`;

【问题讨论】：

你能解决这个问题吗？据我所知，我认为你需要一架手风琴。

标签： html css reactjs styled-components blueprint

【解决方案1】：

它会自动打开吗？我遇到了一个问题，即使我没有悬停也没有点击，子菜单会自动打开！！！

然后在 popover2 中添加autoFocus={false}。这是我的代码示例

<Popover2
     content={
       <>
        <Menu key="menu">
          <MenuItem icon="camera" text="Menu 1"></MenuItem>
          <MenuItem icon="dollar" text="Menu 2" disabled={true} />
          <MenuItem  icon="lifesaver" text="Football">
               <MenuItem icon="chart" text="Team 1" />
               <MenuItem icon="chart" text="Team 2" />
               <MenuItem icon="chart" text="Team 3" />
         </MenuItem>                                        
       </Menu>
      </>
     }
     position="bottom"
     interactionKind="hover"
     autoFocus={false}
>
     <Button
         text="vivid..."
         minimal
         large={false}
         className="b f5 white _btn_"
         intent="none"
         icon="share"
     />
</Popover2>

而对于navBar的样式，也可以关注blueprintjs的navBar

【讨论】：