为什么在将react-image-magnify与swiper/react模块集成时，图像缩放容器不显示？

Question

我正在尝试将

react-image-magnify

集成到我的电子商务存储库中，该存储库使用

swiper/react

作为狂欢。集成有效，但我将鼠标悬停在图像上时无法看到缩放容器。有人可以帮忙吗？

这是我的产品缩略图组件的代码

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Thumbs } from "swiper";
import ReactImageMagnify from "react-image-magnify";
import Image from "next/image";
import { defaultImageLoader } from "../../../../common/utils";
import styles from "../../../../styles/components/Pages/ProductPage/ProductDetailsSection/ProductThumbsGallery.module.css";

const ProductThumbsGallery = ({ images }) => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <div className={styles.productThumbsGallery}>
      <div className={styles.productBoxTop + " " + "product-box-top-swiper-box"}>
        <Swiper
          spaceBetween={10}
          thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
          modules={[FreeMode, Thumbs]}
          className="mySwiper2"
        >
          {images.map((image) => (
            <SwiperSlide key={image.id}>
              <ReactImageMagnify
                {...{
                  smallImage: {
                    isFluidWidth: true,
                    src: image.url,
                    sizes: "(min-width: 800px) 33.5vw, (min-width: 415px) 50vw, 100vw",
                  },
                  largeImage: {
                    alt: "",
                    src: image.url,
                    width: 1200,
                    height: 1800,
                    style: "z-index: 100"
                  },
                  enlargedImageContainerStyle: {
                    backGroundColor: "black",
                    zIndex: "100"
                  },
                  isHintEnabled: true,
                }}
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>

      <div className={styles.productBoxBottom + " " + "product-box-bottom-swiper-box"}>
        <Swiper
          onSwiper={setThumbsSwiper}
          spaceBetween={10}
          slidesPerView={4}
          freeMode={true}
          watchSlidesProgress={true}
          modules={[FreeMode, Thumbs]}
          className="mySwiper"
        >
          {images.map((thumbnail) => (
            <SwiperSlide key={thumbnail.id}>
              <div className={styles.tgBottomBoxImg}>
                <Image
                  src={thumbnail.url}
                  loader={defaultImageLoader}
                  alt={"Loading"}
                  layout="intrinsic"
                  width={850}
                  height={850}
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
};

export default ProductThumbsGallery;

我尝试使用示例，但示例有点难以理解

Answer 1

我遇到了类似的问题。就我而言，这是因为我使用的是 Tailwind CSS 并且它覆盖了一些 CSS 属性。为了解决这个问题，我将这个

MagnifyImgContainer

类添加到容器中，并将下面的CSS代码添加到index.css文件中

/* unset css for the product image zoom in product slider */

.MagnifyImgContainer img {
  all: unset;
}

注意：在您的情况下，此 CSS 代码可能不是确切的解决方案，请检查您的元素并对需要处理的所有元素执行相同的操作