更新后Material UI的TextField选择器选项横向排列而非纵向排列如何解决

核心触发原因 #

该问题是MUI 5版本下Select下拉选项的默认纵向布局被覆盖导致的，常见诱因有3种：

• 父级容器样式穿透：当前外层嵌套为Container -> Paper -> Box，如果外层Box设置了display: flex且未限制样式作用范围，样式会穿透到下拉菜单的ul（MenuList组件）容器上，将默认的flex-direction: column覆盖为横向排布
• 样式引擎配置冲突：依赖中同时安装了@emotion/styled和@mui/styled-engine-sc两套样式引擎，MUI 5默认使用emotion作为样式引擎，若项目中配置了使用styled-components作为样式引擎但配置不完整，会导致内置组件样式缺失，MenuList默认的纵向布局样式不生效
• 全局样式覆盖：如果项目中写了针对ul、li标签的全局重置样式，给ul设置了display: flex且未加作用域限制，会直接覆盖MUI下拉菜单的列表容器样式

排查修复步骤 #

1. 可先通过强制指定下拉列表布局快速修复问题，给TextField新增如下配置即可：

<TextField 
  select
  margin="normal"
  value={colegio}
  helperText="Seleccione la sede"
  onChange={handleChangeColegio}
  // 新增配置强制下拉列表纵向排布
  SelectProps={{
    MenuProps: {
      sx: {
        '& .MuiMenu-list': {
          flexDirection: 'column'
        }
      }
    }
  }}
>
  {sedes.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

2. 检查外层Box的样式，确认是否有全局生效的flex相关配置，给Box加专属类名限制样式作用范围即可解决穿透问题
3. 确认样式引擎配置：如果没有特意要使用styled-components作为MUI的样式引擎，可以直接卸载@mui/styled-engine-sc依赖避免冲突；如果要使用，需要在webpack配置中给styled-engine设置别名，保证样式正确加载
4. 检查全局CSS文件，确认是否有针对ul的通用display: flex配置，调整为仅在指定类名下生效即可

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