Wrapping a Modal-Component around a Zoom-Component

[karabas77]

Hi,

I have the following jsx-code:
<Modal> <Zoom> <Image/> </Zoom> </Modal>
To be honestly I don't really understand the explanation in the Readme file for the Modal. I am quite new to react. My problem is: Acutally everything works fine, but somehow with the Zoom-Component added, some of the Styling I added via CSS-Modules to the Modal-Component aren't applied anymore. In this case on large screens everything is fine, but a media-query seems not to be used anymore.
Could someone give me an example of how to correctly combine a custom Modal-Component with the Zoom-Component?

Sorry if this is the wrong place for such questions.

[rpearce]

@karabas77 If you can provide an example through https://codesandbox.io or equivalent that demonstrates your issue, I can be much more helpful.

That said, this image zooming isn't intended to be used inside of a modal, for zooming it would now have us end up with a modal on top of a modal, and that makes me think of https://modalzmodalzmodalz.com

[PixeledCode]

This is how I am handling it:

    const [isModalOpen, setIsModalOpen] = React.useState(false);
    const [lockModal, setLockModal] = React.useState(false);
    const [zoom, setZoom] = React.useState(false);
    
    <Modal
          open={isOpen}
          onOpenChange={(e) => {
            if (lockModal) {
              setZoom(false);
              setLockModal(false);
            } else {
              setIsModalOpen(e);
            }
          }}
    >
    <Zoom
        onZoomChange={(e) => {
           setZoom(e);
           setIsModalOpen(e);
          }}
    > 
        <Image/>
    </Zoom>
    </Modal>