SwiperJs - TypeError Type \'{ \"--swiper-pagination-color\": string; }\' 不可分配给类型 \'Properties<string |数字、字符串 & {}>\'.ts(2322)答案

【问题标题】：SwiperJs - TypeError Type '{ "--swiper-pagination-color": string; }' is not assignable to type 'Properties<string | number, string & {}>'.ts(2322)SwiperJs - TypeError Type \'{ \"--swiper-pagination-color\": string; }\' 不可分配给类型 \'Properties<string |数字、字符串 & {}>\'.ts(2322)
【发布时间】：2023-02-26 03:00:37
【问题描述】：

我在 NextJS 中使用 (Swiper)，我正在尝试更改分页和导航的样式，而不覆盖全局样式中的样式。据我所知，它不能在模块 CSS 中完成，所以我求助于使用内联 CSS 和 Swiper 组件as suggested here。

但它抛出类型错误 -

Type '{ "--swiper-pagination-color": string; }' is not assignable to type 'Properties<string | number, string & {}>'.
Object literal may only specify known properties, and '"--swiper-pagination-color"' does not exist in type 'Properties<string | number, string & {}>'.ts(2322)
index.d.ts(1863, 9): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps'

甚至 Swiper 自己的 Demos 链接到 code sandbox (line 23) 也展示了这种对分页和导航进行样式化的精确方式。作为打字稿新手，我不确定如何解决此问题。

这是我正在使用的 Swiper 组件。 -

             <Swiper
              loop={true}
              spaceBetween={10}
              slidesPerView={1}
              navigation={true}
              style={{
                "--swiper-pagination-color": "#fff",
              }}
              thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
              modules={[FreeMode, Navigation, Thumbs]}
            >
              {imgs?.map((item, index) => {
                return (
                  <SwiperSlide key={index} className={styles.carouselImageDivUpper}>
                    <TransformWrapper>
                      <TransformComponent>
                        <img className={styles.carouselImage} src={item?.s3UrlLink} />
                      </TransformComponent>
                    </TransformWrapper>
                  </SwiperSlide>
                );
              })}
            </Swiper>

【问题讨论】：

如果您将自定义属性声明移动到 <Swiper> 的父 DOM 节点会怎样，因为 CSS 属性向下级联 DOM 树并且是可继承的。如果您使用的是 TypeScript，请考虑将您传递到 style 属性的对象手动转换为 React.CSSProperties，即 style={{ ... } as React.CSSProperties

标签： typescript next.js swiper.js

【解决方案1】：

特里的评论包含了你问题的答案，所以这就是它在代码中的实现方式：

<Swiper
          loop={true}
          spaceBetween={10}
          slidesPerView={1}
          navigation={true}
          style={{
            "--swiper-pagination-color": "#fff",
          } as CSSProperties}
          thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
          modules={[FreeMode, Navigation, Thumbs]}
        >
          {imgs?.map((item, index) => {
            return (
              <SwiperSlide key={index} className={styles.carouselImageDivUpper}>
                <TransformWrapper>
                  <TransformComponent>
                    <img className={styles.carouselImage} src={item?.s3UrlLink} />
                  </TransformComponent>
                </TransformWrapper>
              </SwiperSlide>
            );
          })}
        </Swiper>

【讨论】：