屏幕缩小时如何实现React MUI折叠导航垂直排列效果

• 需要实现的效果：当屏幕宽度小于等于500px时，展示支持展开/收起切换的移动端菜单，展开后菜单项垂直排列。
• 当前已完成功能：小屏下菜单显隐切换、菜单按钮图标（汉堡图标/关闭图标）切换功能已正常实现。
• 现存问题：展开后的菜单仍然保持水平排列，不符合垂直排布的预期。

import React, { useState } from "react";
import {
  MenuItem,
  MenuList,
  AppBar,
  Toolbar,
  IconButton
} from "@mui/material";
import HomeIcon from "@mui/icons-material/Home";
import MenuIcon from "@mui/icons-material/Menu";
import CloseIcon from "@mui/icons-material/Close";

export default function App() {
  const [toggleMenu, setToggleMenu] = useState(false);

  return (
    <AppBar position="static">
      <Toolbar
        sx={{
          display: "flex",
          alignItems: "center",
          "@media screen and (max-width: 500px)": {
            justifyContent: "space-between"
          }
        }}
      >
        <IconButton>
          <HomeIcon />
        </IconButton>
        <MenuList
          sx={{
            display: "flex",
            alignItems: "center",
            "@media screen and (max-width: 500px)": {
              display: !toggleMenu ? "none" : "flex"
            }
          }}
        >
          <MenuItem>Category one</MenuItem>
          <MenuItem>Category two</MenuItem>
        </MenuList>

        <IconButton
          onClick={() => setToggleMenu(!toggleMenu)}
          sx={{
            display: "none",
            "@media screen and (max-width: 500px)": {
              display: "block"
            }
          }}
        >
          {!toggleMenu ? <MenuIcon /> : <CloseIcon />}
        </IconButton>
      </Toolbar>
    </AppBar>
  );
}

问题根源是两处默认样式没有覆盖：

1. Toolbar 作为flex容器默认不换行，菜单无法排布到logo和按钮的下一行
2. MenuList 的flex布局默认方向为水平排列（flex-direction: row），所以菜单项始终横向排布

只需要修改两处sx属性即可：

• 给小屏下的Toolbar增加flexWrap: "wrap"配置，允许子元素换行
• 给小屏下的MenuList增加flexDirection: "column"、width: "100%"配置，让菜单占满整行、内部菜单项垂直排列，可根据需要调整对齐方式和内边距

修改后的核心样式片段：

// Toolbar的sx配置
sx={{
  display: "flex",
  alignItems: "center",
  "@media screen and (max-width: 500px)": {
    justifyContent: "space-between",
    flexWrap: "wrap" // 新增换行配置
  }
}}

// MenuList的sx配置
sx={{
  display: "flex",
  alignItems: "center",
  "@media screen and (max-width: 500px)": {
    display: !toggleMenu ? "none" : "flex",
    flexDirection: "column", // 改为垂直排列
    width: "100%", // 占满整行宽度
    alignItems: "flex-start", // 菜单项左对齐
    padding: "8px 0" // 调整上下间距
  }
}}

如果需要实现平滑展开收起动画，可以用MUI内置的Collapse组件包裹MenuList，用toggleMenu状态控制Collapse的显隐即可，不需要再手动给MenuList设置display属性。

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