如何修改Chakra UI Modal的z-index以覆盖React Leaflet地图

我正在基于教程，使用Chakra UI的Modal组件在React Leaflet的Circle Marker Popup组件中实现自定义lightbox图片效果。当前功能可运行，但遇到z-index和定位问题：Modal被地图容器的部分元素遮挡，无法置于所有内容顶层。

Chakra Modal默认z-index为1400，但Leaflet图层层级更高，导致Modal被遮挡，关闭按钮也无法点击。我需要将lightbox置于文档顶层，要求把Modal的z-index修改为2400及以上，但不清楚如何覆盖这个多部分组件的z-index——在Modal主题定义文件中也未找到相关配置项。

我的LightBox组件代码如下：

import React from 'react'
import { Modal, ModalContent, ModalBody, ModalCloseButton, Flex, ModalOverlay, ModalHeader, useDisclosure } from '@chakra-ui/react'

const LightBox = ({children, src, alt, Wrapper = 'div'}, zIndex=800) => {
    const { isOpen, onOpen, onClose } = useDisclosure()

    return (
    <Wrapper
    onClick={onOpen}
    >
        {children}
        {isOpen ?
            <Modal isOpen={isOpen} onClose={onClose}>
                <ModalOverlay />
                <ModalContent zIndex={zIndex}>
                    <ModalHeader>
                        <ModalCloseButton />
                    </ModalHeader>
                    <ModalBody>
                        <Flex onClick={onClose}>
                            <img 
                                src={src}
                                alt={alt}
                                style={{ height: 'auto', width: '100%' }}
                            />
                        </Flex> 
                    </ModalBody>
                </ModalContent>
            </Modal>
        : null}
    </Wrapper>
    )
} 
export default LightBox

更新记录 #

• 更新1：直接使用Chakra Modal仍存在相同问题，Modal位于地图容器内部，关闭按钮因被遮挡无法点击，推测是Leaflet地图元素的相对定位导致。
• 更新2：意识到需要通过扩展主题覆盖Modal的z-index，但Modal是多部分组件，不清楚配置位置及覆盖方式，寻求能将z-index设置为2400及以上的解决方案。

方法1：直接给ModalOverlay和ModalContent设置更高z-index #

Chakra Modal由ModalOverlay和ModalContent等多部分组成，单独设置ModalContent的z-index不足以覆盖Leaflet层级，需要同时提升Overlay的层级：

<Modal isOpen={isOpen} onClose={onClose}>
  <ModalOverlay zIndex={2400} />
  <ModalContent zIndex={2401}>
    {/* 原有内容 */}
  </ModalContent>
</Modal>

方法2：通过扩展Chakra主题全局覆盖Modal层级 #

如果需要全局修改所有Modal的z-index，可在Chakra主题扩展中针对Modal的各部分配置：

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  components: {
    Modal: {
      parts: ['overlay', 'content'],
      baseStyle: {
        overlay: { zIndex: 2400 },
        content: { zIndex: 2401 }
      }
    }
  }
})

// 在根组件中用ThemeProvider包裹应用
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* 应用内容 */}
    </ChakraProvider>
  )
}

方法3：脱离Leaflet容器定位 #

若Modal被限制在Leaflet的相对定位容器内，可通过Portal将Modal挂载到文档body下，彻底脱离父容器的层级限制：

<Modal 
  isOpen={isOpen} 
  onClose={onClose} 
  portalProps={{ container: document.body }}
>
  {/* 原有内容 */}
</Modal>

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