如何将React Pro Sidebar侧边栏菜单设置为默认折叠状态？

你的代码默认展开是因为isExpanded初始值设为true，导致Sidebar组件的collapsed属性为!true（即false），所以侧边栏默认处于展开状态。同时你自行维护的isExpanded状态和useProSidebar提供的isCollapsed状态存在同步问题，建议统一使用官方提供的状态管理方式，以下是两种可行的解决办法：

方法一：组件挂载时主动触发折叠 #

通过useEffect钩子在组件初始化时调用collapseSidebar(true)，强制侧边栏默认折叠：

import React, { useEffect } from "react";
import { Sidebar, Menu, MenuItem, useProSidebar } from "react-pro-sidebar";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import { Link } from "react-router-dom";
import logo from '../../images/awb_logo.svg';
import PeopleIcon from '@mui/icons-material/People';
import Person3Icon from '@mui/icons-material/Person3';
import BusinessIcon from '@mui/icons-material/Business';
import EscalatorWarningIcon from '@mui/icons-material/EscalatorWarning';
import PostAddIcon from '@mui/icons-material/PostAdd';
import "../../css/newstyle.scss";

function MySidebar() {
  const { collapseSidebar } = useProSidebar();

  // 组件挂载后默认折叠侧边栏
  useEffect(() => {
    collapseSidebar(true);
  }, [collapseSidebar]);

  return (
    <div id="app" style={{ height: "100vh", display: "flex" }}>
      <Sidebar style={{ height: "100vh" }}>
        <Menu>
          <MenuItem
            icon={<MenuOutlinedIcon />}
            onClick={() => collapseSidebar()}
            style={{ textAlign: "center" }}
          />

          <MenuItem icon={<PeopleIcon />} hide-label>Home</MenuItem>
          <MenuItem icon={<Person3Icon />} hide-label>Team</MenuItem>
          <MenuItem icon={<BusinessIcon />} hide-label>Contacts</MenuItem>
          <MenuItem icon={<EscalatorWarningIcon />} hide-label>Profile</MenuItem>
          <MenuItem icon={<PostAddIcon />} hide-label>FAQ</MenuItem>
        </Menu>
      </Sidebar>
    </div>
  );
}

export default MySidebar;

方法二：通过Provider设置初始状态 #

如果你的侧边栏组件被ProSidebarProvider包裹，可以直接在Provider中配置initialCollapsed={true}来设置默认折叠状态，这种方式更贴合官方状态管理逻辑：

根组件/父组件修改： #

import { ProSidebarProvider } from "react-pro-sidebar";
import MySidebar from "./path/to/MySidebar";

function App() {
  return (
    <ProSidebarProvider initialCollapsed={true}>
      <MySidebar />
      {/* 其他页面内容 */}
    </ProSidebarProvider>
  );
}

侧边栏组件简化： #

import React from "react";
import { Sidebar, Menu, MenuItem, useProSidebar } from "react-pro-sidebar";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import { Link } from "react-router-dom";
import logo from '../../images/awb_logo.svg';
import PeopleIcon from '@mui/icons-material/People';
import Person3Icon from '@mui/icons-material/Person3';
import BusinessIcon from '@mui/icons-material/Business';
import EscalatorWarningIcon from '@mui/icons-material/EscalatorWarning';
import PostAddIcon from '@mui/icons-material/PostAdd';
import "../../css/newstyle.scss";

function MySidebar() {
  const { collapseSidebar } = useProSidebar();

  return (
    <div id="app" style={{ height: "100vh", display: "flex" }}>
      <Sidebar style={{ height: "100vh" }}>
        <Menu>
          <MenuItem
            icon={<MenuOutlinedIcon />}
            onClick={() => collapseSidebar()}
            style={{ textAlign: "center" }}
          />

          <MenuItem icon={<PeopleIcon />} hide-label>Home</MenuItem>
          <MenuItem icon={<Person3Icon />} hide-label>Team</MenuItem>
          <MenuItem icon={<BusinessIcon />} hide-label>Contacts</MenuItem>
          <MenuItem icon={<EscalatorWarningIcon />} hide-label>Profile</MenuItem>
          <MenuItem icon={<PostAddIcon />} hide-label>FAQ</MenuItem>
        </Menu>
      </Sidebar>
    </div>
  );
}

export default MySidebar;

另外注意：你原来代码中style={({ height: "100vh" }, { display: "flex" })}的写法有误，逗号表达式会导致仅display: "flex"生效，已修正为合并后的对象写法style={{ height: "100vh", display: "flex" }}。

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