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

问题重现 #

使用Swiper Element v10.3.1时，通过injectStyles注入的.swiper-slide样式未生效，代码如下：

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>
  )
   
}

解决方法 #

方法一：全局CSS定位Shadow DOM元素 #

Swiper Element的幻灯片处于Shadow DOM中，可通过::part伪元素直接定位样式：

/* 在全局CSS文件（如index.css）中添加 */
swiper-container::part(slide) {
  width: auto;
  background: blue;
}

方法二：修正injectStyles的使用方式 #

injectStyles需要在初始化时作为参数直接传入，而非通过Object.assign赋值。修改useEffect逻辑：

useEffect(() => {
  if (!swiperElRef.current) return;

  // 所有配置参数统一在initialize中传入
  swiperElRef.current.initialize({
    spaceBetween: 16,
    slidesPerView: 1.2,
    loop: true,
    injectStyles: [
      `
      .swiper-slide {
        width: auto;
        background: blue;
      }
      `
    ]
  });
}, []);

同时移除swiper-container标签上的重复配置属性：

<swiper-container
  style={{ width: "100%", paddingBlock: "1rem" }}
  ref={swiperElRef}
>
  {/* 幻灯片内容 */}
</swiper-container>

方法三：直接给幻灯片加内联样式 #

如果样式逻辑简单，可直接给swiper-slide添加内联样式：

<swiper-slide style={{ width: "auto", background: "blue" }}>
  <div>1</div>
</swiper-slide>
<swiper-slide style={{ width: "auto", background: "blue" }}>
  <div>2</div>
</swiper-slide>

内容的提问来源于stack exchange，提问作者Jobie J