如何让Chakra UI的ModalOverlay仅覆盖限定区域而非全屏？

要让ModalOverlay仅覆盖中间区域（排除上下粉色区域），可通过以下两种方式实现：

方法1：用clip-path裁剪遮罩范围 #

直接给ModalOverlay添加clip-path样式，精确控制遮罩的显示区域：

<>
  <Button onClick={onOpen}>Trigger modal</Button>
  {/* 上下粉色区域高度各设为100px，可按需修改 */}
  <Modal onClose={onClose} isOpen={isOpen} isCentered>
    <ModalOverlay 
      style={{
        clipPath: 'inset(100px 0 100px 0)',
        bg: 'rgba(0,0,0,0.5)'
      }} 
    />
    <ModalContent>
      <ModalHeader>Modal Title</ModalHeader>
      <ModalCloseButton />
      <ModalBody>
        <Lorem count={2} />
      </ModalBody>
      <ModalFooter>
        <Button onClick={onClose}>Close</Button>
      </ModalFooter>
    </ModalContent>
  </Modal>
</>

• clip-path: inset(100px 0 100px 0) 表示从顶部、底部各裁剪100px区域，遮罩仅保留中间部分
• 若需要自定义遮罩透明度或颜色，直接修改bg属性即可

方法2：将Modal嵌套在中间内容容器内 #

如果页面本身已划分出上下粉色区域和中间内容区，可将Modal嵌套在中间容器中，让遮罩自动适配容器范围：

// 页面整体结构
<div style={{ 
  display: 'flex',
  flexDirection: 'column',
  minHeight: '100vh'
}}>
  {/* 顶部粉色栏 */}
  <div style={{ height: '100px', bg: 'pink' }}></div>
  {/* 中间内容容器 */}
  <div style={{ flex: 1, position: 'relative' }}>
    <Button onClick={onOpen}>Trigger modal</Button>
    <Modal 
      onClose={onClose} 
      isOpen={isOpen} 
      isCentered
      containerProps={{ style: { position: 'static' } }}
    >
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Modal Title</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Lorem count={2} />
        </ModalBody>
        <ModalFooter>
          <Button onClick={onClose}>Close</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  </div>
  {/* 底部粉色栏 */}
  <div style={{ height: '100px', bg: 'pink' }}></div>
</div>

• 设置containerProps={{ style: { position: 'static' } }}取消Modal默认的全屏绝对定位，使其继承父容器的范围
• ModalOverlay会自动覆盖中间内容容器，不会延伸到上下粉色区域

注意事项 #

• 两种方案可根据页面结构选择：已有固定中间容器选方法2，仅需裁剪遮罩选方法1
• 可根据实际需求调整clip-path的数值或容器高度，匹配粉色区域的实际尺寸

内容的提问来源于stack exchange，提问作者이선재