如何覆盖 Chakra UI 模态组件 z-index 值以将模态组件放置在 React Leaflet Map 上

Question

我正在尝试根据本文并使用 Chakra Modal 组件，在 React Leaflet Circle Marker Popup 组件中的图像上创建自定义灯箱效果。该实现有效，但我遇到了 Chakra UI 的 z-index 和放置问题。我的目标是将灯箱放置在所有其余内容的顶部，目前，由于相对定位，模态框放置在地图容器部分的下方。

据我了解，Chakra Modal 组件应该放置在所有内容上，但该组件的默认 z 索引是相对于 Leaflet 图层放置的，因此会渲染在地图容器的一部分下方。将文章中的代码与模态结合使用会产生接近我想要的结果，除了模态灯箱放置在 Leaflet 地图 div 的一部分下方，显得不美观并且关闭按钮被遮挡。

我希望将灯箱 div 放置在整个文档的顶部，但我不确定如何覆盖模态组件的默认值 1400 到 2400，以便将其放置在整个地图上。覆盖多部分组件有点棘手，而且看起来 Modal z-index 值没有在Modal 主题定义中指定。我使用模态组件的灯箱如下：

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

可以在此链接和沙箱中看到工作代码

更新：我使用 Chakra Modal 组件尝试了相同的方法，该组件也遇到了相同的 z-index 问题。就内容排序而言，模态框放置在地图容器内，而不是放置在地图容器之上。此外，单击关闭按钮无法关闭模态框，该按钮被部分遮挡。我的 CSS 不是很好，但我认为这是相对于 Leaflet 地图元素的相对定位的问题。可以在此处找到带有 Modal 实现的更新代码，但我没有链接到演示，因为实现和结果与我自己的尝试类似。

更新 2：所以，我意识到我需要做的是通过扩展主题来覆盖 Chakra Modal 的 z 索引。这有点棘手，因为 Modal 是一个多部分组件，但不清楚在哪里指定 Modal z-index 值，或者如何覆盖它。我正在寻找能够帮助我将值设置为 2400 或更高的答案。

Answer 1

显然，一般情况下 z-index 和 chakra-ui/react-leaflet 中使用的 z-index 值存在一些混淆。

\n

快速修复：导航栏的正确 z 索引

\n

这是导航栏（z-index 2000）覆盖了模态框（默认 z-index 1400）。如果你使用zIndex="sticky"改为使用导航栏，它将起作用。

\n

在 chakra-ui 中使用 z-index

\n

chakra-ui 为您提供了一组符合您的情况的最小 z 索引（文档）。您没有将 StickyNav 的 z-index 设置为 2000，而是从列表中选择了标记“sticky”。一旦您开始使用 Overlay 模态框，它就应该按预期工作。

\n

const zIndices = {\n  zIndices: {\n    hide: -1,\n    auto: \'auto\',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n}\n\n<StickyNav\n  zIndex="sticky"\n

\n

使用带有正确 z-index 的 React-Leaflet

\n

React-leaflet（或传单库）使用自己的一组 z-index 值（200 到 700）（文档）来布局其上方的地图和 ui 元素（标记等）。\n但是，显然，它也使用左侧缩放元素的 z-index 1000。虽然 chakra-ui 默认值不是问题，但如果粘性是 1000 而不是 1100，则可能会出现问题。

\n

创建新的 z-index 堆叠上下文

\n

在这种情况下，您可以创建一个新的堆栈上下文（mdn 文档）。mdn 还告诉您需要应用哪些条件。

\n

\n

在以下场景中，文档中任何位置的任何元素都可以形成堆叠上下文：

\n

\n
• 文档的根元素 ()。
\n
• 位置值绝对或相对且 z 索引值非 auto 的元素。
\n
• 具有固定或粘性位置值的元素（粘性适用于所有移动浏览器，但不适用于较旧的桌面浏览器）。
\n
• 作为 flex 容器的子元素，其 z-index 值不是 auto。
\n
• \xe2\x80\xa6
\n

\n

\n

您正在使用<main>with display:flex（第四个示例），只需将 chakra-ui 的子元素 z-index 设置为 0 或“base”即可。否则，您可以将子元素位置设置为relative，并将 z-index 设置为 0 或“base”（第二个示例）。

\n