React-Pro-Sidebar v1自定义及尺寸调整技术求助

以下是直接基于 rootStyles、sx、menuItemStyles 等API实现侧边栏尺寸缩小、样式自定义的完整代码示例，附带逐点说明：

完整示例代码 #

import { useState } from 'react';
import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import 'react-pro-sidebar/dist/css/styles.css';
// 可替换为你实际使用的图标组件
import { HomeIcon, SettingsIcon, UserIcon, MenuIcon } from '@your-icon-library';

function CustomSidebar() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <ProSidebar
      collapsed={collapsed}
      // 核心尺寸控制：缩小侧边栏宽度、禁用flex拉伸
      rootStyles={{
        width: collapsed ? '60px' : '200px',
        minWidth: collapsed ? '60px' : '180px',
        flex: '0 0 auto', // 固定宽度，不随父容器拉伸
      }}
      // 纸张样式与内边距调整
      sx={{
        backgroundColor: '#ffffff',
        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
        padding: '8px 0', // 压缩侧边栏上下内边距
      }}
    >
      {/* 折叠按钮 */}
      <MenuItem
        onClick={() => setCollapsed(!collapsed)}
        icon={<MenuIcon />}
        style={{ textAlign: 'center', padding: '10px 0' }}
      />

      <Menu
        // 菜单项紧凑化设置
        menuItemStyles={{
          root: {
            padding: '8px 16px', // 缩小菜单项内边距，压缩垂直空间
            fontSize: '14px', // 缩小字体尺寸
            lineHeight: '1.4',
          },
          hover: {
            backgroundColor: '#f5f7fa',
          },
          active: {
            backgroundColor: '#e8eff6',
            color: '#2d3748',
          },
        }}
        // 让菜单占满侧边栏剩余空间
        sx={{ flexGrow: 1 }}
      >
        <MenuItem icon={<HomeIcon />}>首页</MenuItem>
        <SubMenu icon={<SettingsIcon />} title="设置">
          <MenuItem>账号设置</MenuItem>
          <MenuItem>偏好设置</MenuItem>
        </SubMenu>
        <MenuItem icon={<UserIcon />}>个人中心</MenuItem>
      </Menu>
    </ProSidebar>
  );
}

export default CustomSidebar;

关键配置说明 #

1. 缩小侧边栏基础尺寸（rootStyles） #

• width/minWidth：直接替换默认250px宽度，折叠状态下可设为极小值（如60px）
• flex: '0 0 auto'：禁用flex增长属性，确保侧边栏不会被父容器强制拉伸

2. 纸张样式自定义（sx） #

• backgroundColor/boxShadow：模拟纸张质感，添加柔和阴影增强层次感
• padding：压缩侧边栏内部上下内边距，减少冗余空白

3. 菜单项紧凑化（menuItemStyles） #

• root.padding：缩小菜单项的上下内边距，压缩垂直高度
• fontSize：缩小字体尺寸，进一步优化空间占用
• hover/active：自定义交互状态样式，保持视觉一致性

4. Flex布局控制（sx） #

• 给Menu组件添加flexGrow: 1，让菜单区域自动填充侧边栏剩余空间，避免底部出现多余空白

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