为 react-slick 设置样式

Question

我正在使用 react-slick (https://react-slick.neostack.com/) 为我的博客制作一个简单的滑块组件。现在，我想简单地将 position: relative 和 z-index: 50 设置为 div with class slack-current（由 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 查询选择器来执行此操作，但这也不起作用。有人知道如何做这个看似简单的事情吗？

Answer 1

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

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;

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

Answer 2

我知道这是旧的，但我正在寻找不同问题的解决方案并遇到了你的问题。您是否尝试过使用 :global？您可以像这样通过父容器传递样式：

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

在样式文件中：

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

为 react-slick 设置样式

Setting styles for react-slick

css

reactjs

react-slick

next.js