MUI X Date Picker在Material UI Drawer组件下方显示问题求助

把MUI X Date Picker放在Material UI Drawer里时，日历弹窗被Drawer盖住，哪怕设置了PopperProps的zIndex也没用，试试下面的解决方法：

• 先确认Drawer的层级：打开浏览器开发者工具，找到Drawer元素，查看它的z-index值（MUI默认临时Drawer的z-index是1200，模态Drawer是1300）
• 给Date Picker的弹窗设置更高的z-index，注意用正确的配置方式：
  如果是MUI X v6及以上版本，通过slotProps配置：

  <DatePicker
    label="选择日期"
    value={dateValue}
    onChange={(newVal) => setDateValue(newVal)}
    slotProps={{
      popper: {
        sx: { zIndex: 1400 } // 数值只要比Drawer的z-index大即可
      }
    }}
  />
  

  如果是MUI X v5及以下旧版本，用PopperProps配置：

  <DatePicker
    label="选择日期"
    value={dateValue}
    onChange={(newVal) => setDateValue(newVal)}
    PopperProps={{
      sx: { zIndex: 1400 }
    }}
  />
  

• 不要开启disablePortal属性：如果给Date Picker添加了这个属性，弹窗会挂载在Drawer内部，很容易被Drawer的overflow或层级遮挡，保持默认的Portal挂载到body即可

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