Reactjs React pro侧边栏

有人用过react pro侧边栏吗。有人能告诉我如何使用sass边栏组件以及如何增加边栏的长度吗。是否有其他库提供了如何使用侧边栏的示例。下面是react pro边栏示例

<ProSidebar>
        <SidebarHeader>
          {
           Dashboard}
        </SidebarHeader>
        <Menu iconShape="square">
          <MenuItem>Dashboard</MenuItem>
          <SubMenu title="Components">
            <MenuItem>Component 1</MenuItem>
            <MenuItem>Component 2</MenuItem>
          </SubMenu>
          <SubMenu title="Reports">
            <MenuItem>My Report</MenuItem>
            <MenuItem>MIS Report</MenuItem>
          </SubMenu>
        </Menu>
      </ProSidebar>
      ;

{
仪表板}
仪表板
组成部分1
构成部分2
我的报告
误报
;

请帮助

增加侧栏（react pro侧栏）组件高度，只需将sidebare包装在div标记中，并将样式添加到该div中，如下所示：

.sidebar {
      height: 60vh !important;
  }

<div className='sidebar'>
<ProSidebar>
        <SidebarHeader>
          {
           Dashboard}
        </SidebarHeader>
        <Menu iconShape="square">
          <MenuItem>Dashboard</MenuItem>
          <SubMenu title="Components">
            <MenuItem>Component 1</MenuItem>
            <MenuItem>Component 2</MenuItem>
          </SubMenu>
          <SubMenu title="Reports">
            <MenuItem>My Report</MenuItem>
            <MenuItem>MIS Report</MenuItem>
          </SubMenu>
        </Menu>
      </ProSidebar>

</div>

。侧栏{
高度：60vh！重要；
}
{
仪表板}
仪表板
组成部分1
构成部分2
我的报告
误报

要安装sass，请运行

npm install node-sass

然后您只需创建一个

.scss

文件并将其导入您的react文件

import './custom.scss';

您的

custom.scs

可以简单到：

$sidebar-width: 323px;
@import '~react-pro-sidebar/dist/scss/styles.scss';

注意：如果您将css用于react pro边栏，请记住删除

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

---

Pro侧边栏使用嵌套类，即（按顺序）

• 第1节（主要部分）

pro_sidebar=这是一个包装器类，它将所有的结构集合在一起

pro_sidebar_inner=此类用于提供背景

pro_sidebar_layout=此类用于提供菜单项的布局

• 第2节（基于内容）

pro_sidebar_header=为边栏添加标题，如徽标

pro_sidebar_content=添加侧边栏的内容，如菜单

pro_sidebar_footer=为边栏添加页脚，如版权

更多-

所以要增加边栏的使用高度

.pro侧边栏{
位置：绝对位置；
身高：100%；
}