MUI X Data Grid v5样式未隔离导致Select下拉组件功能异常

问题根源 #

你遇到的样式冲突是版本不匹配导致的：

• @mui/x-data-grid v4.x 是适配旧版 @material-ui/core v4 的版本，本身就依赖 MUI v4 核心库
• 你的项目同时安装了 MUI v5 核心库 @mui/material v5.x，两套版本的样式规则共存、互相覆盖：MUI v4 的全局样式给通用 flex 容器设置了默认 flex-direction: row，刚好覆盖了 MUI v5 中 Select 下拉菜单默认的 flex-direction: column 规则，所以才会出现下拉选项挤在同一行的异常。

解决方案 #

方案1（推荐）：升级 DataGrid 到匹配 MUI v5 的版本 #

直接将 @mui/x-data-grid 升级到 v5.0.0 及以上版本即可，这个版本已经移除了对 @material-ui/core v4 的依赖，完全适配 @mui/material v5，从根源解决样式冲突问题。升级后你可以直接移除项目中不必要的 @material-ui/core v4 依赖。

方案2（临时修复）：手动覆盖 Select 下拉样式 #

如果暂时无法升级 DataGrid，可以给 Select 组件传入 MenuProps 强制指定下拉列表的布局方向，直接修复显示异常：

<Select
  MenuProps={{
    sx: {
      flexDirection: 'column'
    }
  }}
>
  {/* 你的 MenuItem 内容 */}
</Select>

关于依赖的疑问说明 #

@mui/x-data-grid v4.x 属于 MUI 大版本升级的过渡产物，官方定位就是给仍在使用 @material-ui/core v4 的项目提供 DataGrid 组件，所以它的依赖列表里明确包含 @material-ui/core v4 属于正常设计，不是依赖标注错误。

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