React+Mantine模态框中DatePicker无法完整显示的问题求助

下面是几个可行的解决方法，按推荐优先级排序：

• 启用Portal挂载下拉面板
  Mantine的DatePicker默认将下拉日历面板放在父容器内部，当模态框尺寸不足时会被裁剪。开启withinPortal属性后，面板会挂载到body节点下，脱离模态框的尺寸限制：

  import { DatePicker, Modal } from '@mantine/core';
  
  <Modal opened={true} title="选择日期">
    <DatePicker withinPortal />
  </Modal>
  

• 调整模态框的溢出规则
  如果不想用Portal，可以修改模态框的overflow样式，允许内部元素超出容器范围：

  <Modal 
    opened={true} 
    title="选择日期"
    sx={{ overflow: 'visible' }}
  >
    <DatePicker />
  </Modal>
  

  注意：这种方式可能导致模态框内其他内容也溢出容器，需结合实际布局场景使用。

• 自定义下拉面板位置
  通过dropdownPosition属性指定下拉面板的显示位置，避开模态框的边界区域：

  <DatePicker dropdownPosition="bottom-start" />
  

  可选的位置值包括top、bottom、left、right以及带方位的组合值（如bottom-end）。

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