MUI v4迁移v5后AppBar Menu菜单项水平排列异常

该Menu列表水平排布异常是MUI v4向v5迁移阶段的典型兼容问题，无自定义样式冲突的前提下，触发原因基本为以下三类：

• 项目中同时存在v4版本@material-ui/*包与v5版本@mui/*包，两套组件库的类名生成规则、默认布局样式冲突，v5 Menu组件依赖的List组件默认flex-direction: column规则被v4同名类样式覆盖
• 未按v5要求配置样式注入优先级，CRA默认的CSS加载顺序导致全局样式优先级高于MUI组件内置样式，覆盖了菜单列表的垂直排布属性
• 迁移过程漏装v5所需的样式引擎依赖，导致v5组件内置样式未正常注入

1. 清理冗余v4依赖 #

执行命令卸载所有v4版本MUI包，避免双版本共存冲突：

# npm用户执行
npm uninstall @material-ui/core @material-ui/icons @material-ui/styles

# yarn用户执行
yarn remove @material-ui/core @material-ui/icons @material-ui/styles

卸载完成后全局检索代码，将所有从@material-ui/路径导入的组件，全部替换为@mui/开头的v5导入路径：

// 错误的v4导入
import AppBar from '@material-ui/core/AppBar';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

// 正确的v5导入
import AppBar from '@mui/material/AppBar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

2. 补全v5必需依赖 #

执行命令安装v5核心组件与配套样式引擎：

npm install @mui/material @emotion/react @emotion/styled @mui/styles

注：@mui/styles是迁移阶段兼容旧版styled()API的过渡包，全量迁移完成后建议替换为@mui/material/styles的对应API，减少包体积。

3. 修正样式注入顺序 #

在App入口文件最外层包裹StyledEngineProvider并开启injectFirst属性，强制MUI样式优先注入，避免被CRA默认全局CSS覆盖：

import { StyledEngineProvider } from '@mui/material/styles';
import AppBar from './AppBar';
import Welcome from './Welcome';

function App() {
  return (
    <StyledEngineProvider injectFirst>
      {/* 原有应用内的所有组件、路由配置全部放在该Provider内部 */}
      <AppBar />
      <Welcome />
    </StyledEngineProvider>
  );
}

export default App;

4. 全局CSS校验 #

打开CRA初始化生成的src/index.css、src/App.css文件，检查是否存在对ul、li标签设置的全局display: flex、flex-direction: row规则，如果存在则为这类全局选择器增加业务作用域，避免匹配到MUI组件生成的DOM节点。

修复完成后重启开发服务：

npm start

切换到移动端视图点击AppBar菜单按钮，弹出的Menu选项列表即可恢复默认垂直排列。

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