如何在React中的Swiper Element中为幻灯片添加样式

Question

我正在使用 React 的 Swiper Element，我正在尝试向 swiper 幻灯片添加 css 样式，但似乎样式没有被注入。下面的代码片段应该可以说明问题。我该如何解决？ 刷卡器版本：10.3.1

const MyComponent = ()=> {

   const swiperElRef = useRef<SwiperContainer | any>(null);
    
    useEffect(() => {

     if (!swiperElRef.current) {
      return;
    }

    // styles are not working
    const params = {
      injectStyles: [
        `
              .swiper-slide {
                width: auto;
                background: blue;
              }
          `,
      ],
    };

    Object.assign(swiperElRef.current, params);
    swiperElRef.current.initialize();
  }, []);

  return (
    <div>
     <swiper-container
          style={{ width: "100%", paddingBlock: "1rem" }}
          spaceBetween={16}
          slidesPerView={1.2}
          loop
          ref={swiperElRef}
        >
        <swiper-slide>
            <div>1</div>
        </swiper-slide>
         <swiper-slide>
            <div>2</div>
        </swiper-slide>
     </swiper-container>
     </div>
  )
   
}

Answer 1

我认为你需要

init="false"

作为属性，以防止自动初始化。您已经在

initialize()

中手动调用

useEffect

，所以它会发生，after 属性被分配）

<swiper-container
    style={{ width: "100%", paddingBlock: "1rem" }}
    spaceBetween={16}
    slidesPerView={1.2}
    loop
    init="false"
    ref={swiperElRef}
>
    <swiper-slide><div>1</div></swiper-slide>
    <swiper-slide><div>2</div></swiper-slide>
</swiper-container>