设置react-slick的样式

Question

我正在使用react-slick（https://react-slick.neostack.com/）来制作我的博客的简单滑块组件。现在，我想简单地将position:relative和z-index:50设置为类slack-current（由Slider组件生成）的div，但找不到任何方法来做到这一点。我将 NextJS 与以下组件一起使用：

function Carousel({ blogs }) {
  const [imageIndex, setImageIndex] = useState(0);

  const transformDate = (date) => {
    return date.substring(0, 10);
  };

  const NextArrow = ({ onClick }) => {
    return (
      <div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
        <FaArrowRight />
      </div>
    );
  };

  const PrevArrow = ({ onClick }) => {
    return (
      <div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
        <FaArrowLeft />
      </div>
    );
  };

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    beforeChange: (current, next) => setImageIndex(next),
  };

  return (
    <div className={styles.carouselContainer}>
      <Slider {...settings} className={styles.slider}>
        {blogs.map((blog, idx) => (
          <div key={idx} className={styles.slide}>
            <div
              className={
                idx === imageIndex
                  ? `${styles.innerSlide} ${styles.activeSlide}`
                  : `${styles.innerSlide} ${styles.passiveSlide}`
              }
            >
              <p>{transformDate(blog.created_on)}</p>
              <h3>{blog.title}</h3>
              <p>{blog.subtitle}</p>
              <button
                className={
                  idx === imageIndex
                    ? `${styles.button} ${styles.activeButton}`
                    : styles.button
                }
              >
                <Link href={"/blog/" + blog.id}>READ MORE</Link>
              </button>
            </div>
          </div>
        ))}
      </Slider>
    </div>
  );
}

export default Carousel;

因此，由于我在 Slider 组件上设置了 className ={styles.slider} ，我想我可以在 CSS 中这样解决它：

.slider .slick-current {
  position: relative !important;
  z-index: 50 !important;
}

然而，这没有出现，因此没有效果。我也尝试使用 JavaScript 查询选择器来执行此操作，但这也不起作用。有人知道如何做这个看似简单的事情吗？

Answer 1

我用 JavaScript 让它工作，尽管它不是一个优雅的解决方案。下面的代码将使用 useEffect 将position:relative和z-index:50添加到具有CSS类slick-current的元素中，并将其从其他活动幻灯片中删除（因为当另一个幻灯片成为当前幻灯片时，slick当前类会更改幻灯片） ：

function Carousel({ blogs }) {
  const [imageIndex, setImageIndex] = useState(0);

  const transformDate = (date) => {
    return date.substring(0, 10);
  };

  const NextArrow = ({ onClick }) => {
    return (
      <div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
        <FaArrowRight />
      </div>
    );
  };

  const PrevArrow = ({ onClick }) => {
    return (
      <div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
        <FaArrowLeft />
      </div>
    );
  };

  useEffect(() => {
    document.querySelectorAll(".slick-active").forEach((el) => {
      el.style.setProperty("position", "static", "important");
    });

    document
      .querySelectorAll(".slick-current")
      .style.setProperty("position", "relative", "important");
    document
      .querySelectorAll(".slick-current")
      .style.setProperty("z-index", "50", "important");
  }, [imageIndex]);

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    beforeChange: (current, next) => setImageIndex(next),
  };

  return (
    <div className={styles.carouselContainer}>
      <Slider {...settings}>
        {blogs.map((blog, idx) => (
          <div key={idx}>
            <div
              className={
                idx === imageIndex
                  ? `${styles.innerSlide} ${styles.activeSlide}`
                  : `${styles.innerSlide} ${styles.passiveSlide}`
              }
            >
              <p>{transformDate(blog.created_on)}</p>
              <h3>{blog.title}</h3>
              <p>{blog.subtitle}</p>
              <button
                className={
                  idx === imageIndex
                    ? `${styles.button} ${styles.activeButton}`
                    : styles.button
                }
              >
                <Link href={"/blog/" + blog.id}>READ MORE</Link>
              </button>
            </div>
          </div>
        ))}
      </Slider>
    </div>
  );
}

export default Carousel;

仍然欢迎更好的解决方案！