自定义Mantine Select组件解决下拉选项顶部截断问题

我使用Mantine框架实现表单时，遇到Select组件下拉选项因所在容器尺寸限制，顶部被截断导致首个选项无法完整显示的问题。尝试过设置dropdownPosition='top'、调整zIndex确保下拉层级高于表单、添加overflow属性，但均未生效。期望实现下拉选项向容器顶部溢出（而非向下）以避免截断。

现有代码示例 #

Select组件代码 #

return (
  <div
    style={{
      zIndex: 10,
      maxHeight: '200px', // Set the maximum height as per your requirement
      overflowY: 'auto', // Enable vertical scrolling
    }}
  >
    <Select
      ...
      styles={{
        label: { fontWeight: MODALS.LABEL_FONT_WEIGHT },
      }}
      dropdownPosition='top'
      ...
    />
  </div>
)

复用的表单代码 #

<Form
  ...
/>

解决方案 #

• 移除Select外层容器的maxHeight和overflowY: 'auto'：这两个属性会限制下拉菜单的溢出空间，是导致顶部被截断的核心原因。
• 给Select组件添加withinPortal属性：开启后下拉菜单会挂载到body节点下，完全脱离父容器的尺寸限制，自然就能向顶部溢出显示。
• 搭配dropdownOffset微调下拉位置：避免下拉菜单和输入框过度贴合，提升视觉体验。

修改后的代码示例 #

return (
  <div style={{ zIndex: 10 }}>
    <Select
      ...
      styles={{
        label: { fontWeight: MODALS.LABEL_FONT_WEIGHT },
      }}
      dropdownPosition='top'
      withinPortal
      dropdownOffset={{ top: 8 }}
      ...
    />
  </div>
)

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