问如何覆盖Chakra UI Modal组件z-索引值，将Modal组件放置在反应传单图上
EN

Stack Overflow用户

提问于 2022-11-18 03:24:07

回答 1查看 90关注 0票数 1

我试图创建一个自定义的光盒效果的图像在一个反应传单圆环弹出组件基于这篇文章和使用脉轮模态分量。实现工作，但我遇到了z索引和位置问题的脉轮UI。我的目标是将lightbox放在我所有其他内容的顶部，此时由于相对定位，Modal被放置在Map容器的各个部分下面。

据我所知，Chakra Modal组件应该放置在所有的内容上，但是组件的defautl z索引相对于传单层放置，因此在地图容器的下方呈现。使用本文中的代码和模态产生的结果接近我想要的，除了modal Lightbox被放置在显示不美观的传单div的部分下面，关闭按钮被模糊了。

我希望将lightbox放在整个文档的顶部，但我不知道如何覆盖Modal组件的默认值1400到2400，以便将其放在整个地图上。覆盖多部分组件有点棘手，而且它看起来不像在模态主题定义中指定的Modal z索引值。使用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组件，它存在相同的z-索引问题。Modal被放置在map容器中，而不是放在它上面的内容排序上。此外，Modal不能在点击关闭按钮关闭，这是部分模糊。我的CSS不是很好，但我认为这是一个相对位置相对于传单地图元素的问题。使用Modal实现更新的代码可以是在这里发现的，但我不会链接到演示，因为实现和结果与我自己的尝试相似。

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

next.js

z-index

lightbox

react-leaflet

chakra-ui

1元体验云点播

覆盖建站/短视频等热门场景，提供媒资管理、短视频 SDK、小程序插件和播放器云+端一体化能力，助您抓住视频风口

回答 1

Stack Overflow用户

发布于 2022-12-02 02:57:28

您可以通过扩展主题和为ModalContent组件指定z索引值来覆盖Modal组件的z索引值。

首先，在项目的根目录中创建一个theme.js文件，并添加以下代码：

import { theme } from "@chakra-ui/react";

const customTheme = {
  ...theme,
  components: {
    ...theme.components,
    Modal: {
      ...theme.components.Modal,
      Content: {
        zIndex: "2400"
      }
    }
  }
};

export default customTheme;

接下来，将应用程序包装在ThemeProvider组件中，并将自定义主题对象作为theme支柱传递。

import React from "react";
import { ThemeProvider } from "@chakra-ui/react";
import customTheme from "./theme";

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your app components go here */}
    </ThemeProvider>
  );
}

export default App;