我试图在基于this article和使用脉轮Modal component的React瓣叶圆圈标记弹出窗口组件中创建一个自定义灯箱效果的图像。实现工作，但我遇到了z轴索引和脉轮用户界面的位置问题。我的目标是把灯箱放在我的所有其余内容的顶部，此时，由于相对定位，模态被放置在Map容器的部分下方。
据我所知，脉轮模态组件应该放置在所有内容之上，但是组件的默认z-索引相对于Leaflet层放置，因此呈现在Map容器的下面。使用文章中的代码和模态组件产生的结果接近我想要的。除了模态灯箱被放置在部分瓣叶图div下方，看起来不美观，关闭按钮被遮挡。
我想把lightbox div放在整个文档的顶部，但是我不知道如何覆盖Modal组件的默认值1400到2400，这样它就可以放在整个Map上。覆盖一个多部分组件有点棘手，而且看起来Modal的z索引值没有在Modal theme definition中指定。我使用Modal组件的lightbox如下：

import React, {useState} 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()
    //const [ isOpen, setisOpen ] = useState(false)
    
    //const toggleIsOpen = () =>{
    //    setisOpen(!isOpen)
    //}

    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

可以在this link和sandbox上看到工作代码
更新：我已经尝试了同样的方法使用脉轮模态组件，遭受同样的z索引问题。模态是放在Map容器内，而不是在它的顶部，在内容排序方面。此外，模态不能关闭点击关闭按钮，这是部分模糊。我的CSS不是很好，但是我假设这是关于LeafletMap元素的相对定位的问题。使用Modal实现更新的代码可以是found here，但我没有链接到一个演示，因为实现和结果与我自己的尝试相似。
更新2：所以，我已经意识到我需要做的是通过扩展主题来覆盖脉轮模态的z-索引。这有点棘手，因为模态是一个多部分的组件，但不清楚模态z-索引值在哪里指定，或者如何覆盖它。我正在寻找答案，这将帮助我将值放置在2400或以上。