react-pro-sidebar折叠后Submenu无法显示问题求助

问题分析 #

使用react-pro-sidebar时，侧边栏折叠后Submenu子项默认无法展开访问，这是因为组件默认在折叠状态下隐藏了子菜单的触发交互逻辑。

解决方案 #

方法1：配置Submenu属性+折叠状态交互 #

通过useProSidebar获取侧边栏折叠状态，给Submenu添加基础配置，确保折叠时可通过hover触发子菜单展开：

import {
  Sidebar,
  Menu,
  MenuItem,
  useProSidebar,
  SubMenu
} from "react-pro-sidebar";

export default function Layout({ children }) {
  const { collapseSidebar, toggleSidebar, isCollapsed } = useProSidebar();

  return (
    <div style={{ display: "flex", height: "100%" }}>
      <Sidebar breakPoint="md">
        <Menu>
          <SubMenu 
            label="With Submenu" 
            showIcon={true}
            style={{ position: 'relative' }}
          >
            <MenuItem>Help</MenuItem>
          </SubMenu>
          <MenuItem> Calendar</MenuItem>
          <MenuItem> E-commerce</MenuItem>
        </Menu>
      </Sidebar>
      <main>
        <button onClick={() => collapseSidebar()}>Collapse</button>
        <button onClick={() => toggleSidebar()}>Toggle</button>
        <div>{children}</div>
      </main>
    </div>
  );
}

方法2：添加自定义CSS强制交互区域可见 #

在全局样式或组件内添加CSS，确保折叠状态下Submenu的子菜单可通过hover显示：

.pro-sidebar.collapsed .ps-menu-root > .ps-menu-item .ps-submenu-content {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 1000;
  display: none;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pro-sidebar.collapsed .ps-menu-root > .ps-menu-item:hover .ps-submenu-content {
  display: block;
}

方法3：手动控制子菜单展开状态 #

利用isCollapsed状态配合Submenu的open属性，精准控制折叠时的子菜单行为：

import { useState } from 'react';
import {
  Sidebar,
  Menu,
  MenuItem,
  useProSidebar,
  SubMenu
} from "react-pro-sidebar";

export default function Layout({ children }) {
  const { collapseSidebar, toggleSidebar, isCollapsed } = useProSidebar();
  const [submenuOpen, setSubmenuOpen] = useState(false);

  return (
    <div style={{ display: "flex", height: "100%" }}>
      <Sidebar breakPoint="md">
        <Menu>
          <SubMenu 
            label="With Submenu" 
            open={isCollapsed ? submenuOpen : undefined}
            onMouseEnter={() => isCollapsed && setSubmenuOpen(true)}
            onMouseLeave={() => isCollapsed && setSubmenuOpen(false)}
          >
            <MenuItem>Help</MenuItem>
          </SubMenu>
          <MenuItem> Calendar</MenuItem>
          <MenuItem> E-commerce</MenuItem>
        </Menu>
      </Sidebar>
      <main>
        <button onClick={() => collapseSidebar()}>Collapse</button>
        <button onClick={() => toggleSidebar()}>Toggle</button>
        <div>{children}</div>
      </main>
    </div>
  );
}

关键说明 #

核心思路是确保折叠状态下Submenu的交互区域可访问，通过组件内置属性或自定义样式，实现hover/点击触发子菜单展开的效果。

内容的提问来源于stack exchange，提问作者Joshua Philips