react-pro-sidebar导入错误求助：CSS及组件找不到

API 探路者

2026-8-7

问题根源

你参考的博客示例应该是基于旧版（v1）的react-pro-sidebar开发的，但你当前安装的是新版（v2及以上），新版的文件结构、组件命名和导入规则都做了大幅调整，才导致了这两个错误。

两种解决方案

方案1：降级到旧版（完全匹配博客示例）

如果想严格跟着博客的代码走，直接卸载当前版本，安装旧版：

npm uninstall react-pro-sidebar
npm install react-pro-sidebar@1.0.0

安装完成后，原有的react-pro-sidebar/dist/css/styles.css导入语句，以及ProSidebar、SidebarHeader等组件就能正常使用了。

方案2：适配新版API（推荐使用最新版）

如果不想降级，想使用最新版的功能，按以下方式修改代码：

移除样式导入：新版已经把样式内置到组件中，直接删掉import 'react-pro-sidebar/dist/css/styles.css';这句代码。
调整组件导入与结构：新版取消了SidebarHeader、SidebarContent、SidebarFooter这些封装组件，改用基础组件组合布局，示例代码如下：

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

function CustomSidebar() {
  return (
    <Sidebar>
      <Menu>
        {/* 替代原SidebarHeader的区域 */}
        <MenuItem style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>系统导航</MenuItem>
        
        {/* 替代原SidebarContent的内容区域 */}
        <SubMenu label="项目管理">
          <MenuItem>我的项目</MenuItem>
          <MenuItem>新建项目</MenuItem>
        </SubMenu>
        <MenuItem>文档中心</MenuItem>
        
        {/* 替代原SidebarFooter的底部区域 */}
        <MenuItem style={{ marginTop: 'auto', color: '#666' }}>退出登录</MenuItem>
      </Menu>
    </Sidebar>
  );
}