React-Pro-Sidebar ver 1 自定义和调整大小

Question

我正在构建一个需要侧边栏进行导航的 Web 应用程序，但从头开始构建一个应用程序需要花费大量时间，因为我仍然是一名业余 React 开发人员。 有谁知道并可以帮助我如何定制它及其尺寸，例如纸张、柔性生长、填充等？

这是我的侧边栏代码：

<Sidebar 
   backgroundColor="#FAFAFA"
   height="100%"    
   width="220px"
   collapsedWidth="4.5rem"
   breakPoint='md'
   style={{
    height: '100%',
    top: 'auto',
    position: 'sticky',
    padding: '0rem',
    margin: '0rem',
   }}
    
    >
      <Menu 
          menuItemStyles={{
            button: ({ level, active }) => {
              if (level === 0 || level === 1 ) {
                return {
                  backgroundColor: active ? theme.palette.green[500] : undefined,
                  color: active ? 'white' :  undefined ,
                  "&:hover" : {
                    backgroundColor: theme.palette.green[500],
                    color:  'white',
                  }
                }
              }
            },
          }}
        >
        <MenuItem active={location.pathname === '/Home'} component={<Link to="/Home" />} icon={<HomeIcon />}> 
          <Typography variant="sidenav" >Home</Typography>
        </MenuItem>
        <MenuItem active={location.pathname === '/Budgetproposal'} component={<Link to="/Budgetproposal" />} icon={<AccountBalanceIcon />}> 
          <Typography variant="sidenav" >Budget Proposal</Typography>
        </MenuItem>
        </Menu>
      
      </Sidebar>

附图是我当前开发的侧边栏。

我想知道是否有人可以给我一个详细的代码，说明如何使用 rootstyles、sx、menuItemStyles 或其 API 将其大小调整为较小的部分，因为 github 文档中没有详细说明。

Answer 1

如果你想调整侧边栏的高度，你必须使用根类名并覆盖它。高度的根类名是 .ps-sidebar-container

在SideBar.css等CSS文件中：

.ps-sidebar-container{
    height: 100vh !important; //to overwrite default css use !important
}

部分元素的根类名：

• 调整SideBar样式的高度：.ps-sidebar-container
• 调整菜单样式：.ps-menu-root
• 调整菜单项样式： .ps-menu-root >ul>li

这对我有用。

Answer 2

添加 BHARATH V K 的答案：

react-pro-sidebar v1.0.0 的 CSS 选择器：

//sidebar text color
.ps-menu-root{
color: red !important;
}

//hover over menuitems color
.ps-menu-button:hover {
background-color: red  !important;
color: black  !important;
}

//text and background color for submenu
.ps.submenu.content {
color: black !important;
background-color: red  !important;
}

我必须添加 !important 标签才能覆盖现有的 CSS。 为了设置整个侧边栏的背景颜色，我向侧边栏组件添加了内联样式：

<Sidebar backgroundColor="red"></Sidebar>