MUI DatePicker浮层被Modal遮挡问题求助

问题场景 #

组件层级为MUI Page组件嵌套MUI Modal组件，Modal内部渲染MUI DatePicker组件，相关代码如下：

引入代码 #

// @mui
import { DatePicker } from '@mui/x-date-pickers';

渲染实现代码 #

<Controller
    name="createDate"
    control={control}
    render={({ field, fieldState: { error } }) => (
      <DatePicker
        label="Date create"
        value={field.value}
        onChange={(newValue) => {
          field.onChange(newValue);
        }}
        renderInput={(params) => <TextField {...params} fullWidth error={!!error} helperText={error?.message} />}
      />
    )}
/>

当前问题：DatePicker的浮层显示在Modal下方，常规非MUI DatePicker的解决方案无效。

有效解决方案 #

针对MUI X DatePicker的特性，可通过以下几种方式解决：

• 指定浮层挂载容器
  DatePicker的浮层默认挂载到document.body，和Modal的堆叠上下文冲突。通过PopperProps将浮层挂载到Modal内部容器，确保层级在Modal之上：

  <DatePicker
    // 保留原有属性
    PopperProps={{
      container: () => document.querySelector('.MuiModal-root'), // 或指定Modal的具体DOM节点
    }}
  />
  

• 调整Modal的焦点控制属性
  Modal的自动焦点和强制焦点规则可能干扰浮层层级，尝试关闭这两个属性：

  <Modal
    disableAutoFocus={true}
    disableEnforceFocus={true}
    // 保留原有属性
  >
    {/* DatePicker所在内容 */}
  </Modal>
  

• 直接设置浮层z-index
  利用PopperProps的sx属性给浮层设置更高的z-index（Modal默认z-index为1300）：

  <DatePicker
    // 保留原有属性
    PopperProps={{
      sx: {
        zIndex: 1400 // 数值大于1300即可
      }
    }}
  />
  

核心原因 #

MUI X DatePicker的浮层基于Popper组件实现，默认挂载到全局body，而Modal拥有独立的堆叠上下文且z-index较高，导致浮层被遮挡。通过调整浮层的挂载容器或z-index，可让浮层处于Modal的堆叠上下文内或层级更高，从而正常显示。

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