React Material UI DateRangePicker展开占位不悬浮问题解决求助

MUI的DateRangePicker弹出层默认未脱离文档流时，展开会占用页面实际高度挤压其他组件，和Select组件默认的悬浮Popper表现不一致，通常是Popper配置或父容器样式限制导致的。

• 第一步：给DateRangePicker组件添加Popper相关配置，强制弹出层悬浮

import { useState } from 'react';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { TextField, Box } from '@mui/material';

function YourComponent() {
  const [dateRange, setDateRange] = useState([null, null]);

  return (
    <DateRangePicker
      label="选择日期范围"
      value={dateRange}
      onChange={(newValue) => setDateRange(newValue)}
      {/* 核心悬浮配置 */}
      PopperProps={{
        placement: 'bottom-start',
      }}
      slotProps={{
        popper: {
          sx: {
            zIndex: 9999, // 手动指定高优先级层级，避免被其他组件遮挡
          },
          disablePortal: false, // 开启Portal挂载弹出层到body根节点，不受父容器样式限制
        }
      }}
      renderInput={(startProps, endProps) => (
        <>
          <TextField {...startProps} />
          <Box sx={{ mx: 2 }}> 至 </Box>
          <TextField {...endProps} />
        </>
      )}
    />
  );
}

• 第二步：排查父容器样式限制，若父元素设置了overflow: hidden、position: relative/absolute且z-index过低，会导致弹出层被挤压或遮挡，需要调整父容器overflow属性为visible，或提升父容器z-index优先级。

修改后重新唤起日期选择器，弹出层会直接悬浮在页面上层，不占用原有文档流高度，不会挤压下方其他组件，表现和Select组件完全一致。

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