升级到React Material v5后MenuItem组件线性排列异常问题求助

以下为可直接落地的排查步骤：

• 校验基础样式依赖是否完整引入
  MUI v5默认依赖CssBaseline组件提供全局样式重置，未引入时会丢失列表默认块级布局属性，导致MenuItem继承父级行内布局规则。需在应用根节点外层挂载该组件：

  import { CssBaseline } from '@mui/material';
  
  const RootApp = () => {
    return (
      <>
        <CssBaseline />
        {/* 你的应用业务组件 */}
      </>
    );
  };
  

• 检查Menu/Select的容器样式配置
  MUI v5的Menu组件内部默认使用垂直方向的flex布局，如果手动通过sx、classes、MenuProps等属性覆写了Menu根容器、内部List容器的flexDirection为row，或是将容器设置为inline-flex未指定方向，就会触发横向排列。可通过浏览器开发者工具检查Menu对应DOM节点的flex-direction属性，确认是否为自定义样式覆盖导致。
• 排查全局样式冲突
  如果项目全局CSS中对ul、li标签设置了display: inline-block、flex-direction: row等规则，会覆盖MUI的组件默认样式，需调整全局选择器的作用范围，避免直接命中MUI的内部列表节点。
• 校验MUI依赖版本一致性
  若项目中同时存在v4版本的@material-ui/core和v5版本的@mui/material依赖，两个版本的样式和组件逻辑冲突会导致布局异常，需全量升级所有MUI相关依赖到v5正式版，删除v4版本的依赖包和对应引入代码。
• 检查自定义封装逻辑
  如果对MenuItem做了二次封装，需确认其外层没有额外包裹span、div等行内容器或是横向flex容器，MenuItem必须作为Menu/Select的直接子元素使用才能保证默认布局规则生效。

内容的提问来源于stack exchange，提问作者thecoder-elite