求react-pro-sidebar示例截图同款美观侧边栏实现代码

开发者阿泽

2026-6-24

先导入官方默认样式
你大概率是漏了导入组件自带的样式文件，这是演示里美观样式的基础。在你的组件文件或者项目入口里加一行：

import 'react-pro-sidebar/dist/css/styles.css';

导入后基础样式就会和演示一致，不会再是光秃秃的样子。

加上演示里的配置属性
截图里的侧边栏肯定带了一些配置参数，比如固定宽度、背景色、主题模式这些，给<Sidebar>和<Menu>加对应的属性就行：

<Sidebar
  width={250}
  backgroundColor="#fff"
  borderRight="1px solid #e5e7eb"
>
  <Menu theme="light" menuItemStyles={{
    hover: {
      bgColor: '#f3f4f6',
      color: '#1f2937'
    }
  }}>
    <SubMenu label="Charts">
      <MenuItem> Pie charts </MenuItem>
      <MenuItem> Line charts </MenuItem>
    </SubMenu>
    <MenuItem> Documentation </MenuItem>
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>

要是截图里有图标，记得装个react-icons之类的库，把图标加上：

import { FaChartPie, FaChartLine, FaBook, FaCalendar } from 'react-icons/fa';

// 加到对应的Menu组件里
<SubMenu label="Charts" icon={<FaChartPie />}>
  <MenuItem icon={<FaChartLine />}> Line charts </MenuItem>
</SubMenu>
<MenuItem icon={<FaBook />}> Documentation </MenuItem>
<MenuItem icon={<FaCalendar />}> Calendar </MenuItem>

自定义CSS补细节
如果官方默认样式还和截图有差距，写点自定义CSS调整就行，比如调整边距、字体大小：

/* 假设给Sidebar加了custom-sidebar类 */
.custom-sidebar .ps-menu-button {
  padding: 10px 16px;
  font-size: 14px;
}
.custom-sidebar .ps-submenu-content {
  padding-left: 30px;
}