为react-slick设置样式

Question

我正在使用 react-slick (https://react-slick.neostack.com/) 来制作一个简单的博客轮播组件。现在，我想简单地将 position: relative 和 z-index: 50 设置给具有类名 slack-current 的 div 元素（该元素由 Slider 组件生成），但是找不到任何方法来实现这一点。我正在使用以下组件的 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的queryselector来实现这个目标，但是也不起作用。有人知道如何做这个看似简单的事情吗？

- round_circle

Answer 1

我知道这个问题有点老了，但我在寻找解决方案时遇到了您的问题。您是否尝试过使用:global？您可以通过父容器传递样式，像这样：

<section className={styles.container}>
  <Slider>
    // slider content
  </Slider>
</section>

在样式文件中：

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

- true_piotrek

Answer 2

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

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;

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

- round_circle