如何修复Material-UI Select组件中MenuItem水平排列的问题

算力阿峰

2026-10-1

问题根因与解决方案

原因1：全局CSS样式冲突
大部分这类问题都是全局样式重置规则覆盖了MUI默认样式导致的：MUI的下拉菜单底层是<ul>标签包裹<li>格式的MenuItem组件，如果你项目的全局CSS给ul/li设置了display: flex但未指定flex-direction: column，就会出现菜单项水平排列的问题。
修复方案：给Select组件添加MenuProps属性，强制指定下拉菜单的列表为垂直排列，修改后的Select代码如下：
```
<Select
  className="test"
  labelId="demo-simple-select-label"
  label="Age"
  value={10}
  // 新增以下配置
  MenuProps={{
    sx: {
      '& .MuiList-root': {
        flexDirection: 'column'
      }
    }
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>
```
原因2：MUI版本与导入错误
如果你使用的是MUI v5版本，排查两个配置：
1. 确认所有MUI组件都是从@mui/material统一导入，不要混用v4版本的@material-ui/core包，两个版本的样式类不兼容会导致默认样式丢失。
2. 确认项目最外层根组件已经用ThemeProvider包裹，未自定义主题可以直接用默认主题配置：
```
import { ThemeProvider, createTheme } from '@mui/material/styles'

// 根组件外层包裹
<ThemeProvider theme={createTheme()}>
  {/* 你的项目页面代码 */}
</ThemeProvider>
```
原因3：自定义类样式冲突
检查你给Select设置的test类，是否有设置display: flex、float: left这类影响子元素布局的规则，如果有直接删除对应规则即可。