React Material UI Select下拉菜单展开位置异常求助

MUI的Select组件默认会根据视口空间自动判断下拉菜单的展开方向，若组件靠近视口底部，菜单会自动向上展开。要强制菜单始终向下展开，可通过配置MenuProps覆盖默认定位逻辑，修复后的代码如下：

import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, {SelectChangeEvent} from '@mui/material/Select';

export default function DropDownSelect({data}: any) {
  const [age, setAge] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{width: 300}}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">选择项</InputLabel>
        <Select
          sx={{
            width: '100%',
            height: 50,
            borderColor: 'red',
          }}
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="选择项"
          onChange={handleChange}
          // 强制下拉菜单向下展开的核心配置
          MenuProps={{
            getContentAnchorEl: null,
            anchorOrigin: {
              vertical: 'bottom',
              horizontal: 'left',
            },
            transformOrigin: {
              vertical: 'top',
              horizontal: 'left',
            },
          }}
        >
          {data.map((option: any) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Box>
  );
}

核心修复说明 #

• getContentAnchorEl: null：禁用默认的锚点计算逻辑，避免自动定位干扰自定义设置。
• anchorOrigin：指定下拉菜单以Select组件的底部左侧为锚点。
• transformOrigin：设置下拉菜单自身的定位原点为顶部左侧，确保菜单从Select组件底部向下延伸展开。
• 额外修复：原代码中Box的Width属性为大写（不符合MUI sx规范），已改为小写width，并将数值从30调整为300（原数值过小会导致组件显示异常）。

内容的提问来源于stack exchange，提问作者praveen sonkusare