angular - 如何在 Swiper (Angular) 中自定义导航按钮的大小

Question

在我目前的项目中，Swiper 导航按钮太大，但我不知道如何操作大小。

我已经在 styles.css 文件中试过了:

::ng-deep .swiper-button-prev:after,
::ng-deep .swiper-button-next:after {
    font-size: 20px;
}

但这对我不起作用。

我知道我可以打开文件 swiper-bundle.css 并更正此行:

:root {
  --swiper-navigation-size: 44px;
}

但是这个文件位于 npm 包中，这意味着对该文件所做的更改只是本地。我需要将我的代码推送到 GitHub，这样解决方案就不算数了。

Answer 1

  <Swiper
                    style={{
                      "--swiper-navigation-color": "#000",
                      "--swiper-navigation-size": "25px",
                    }}
                    slidesPerView={matchesSmall ? 5 : 8}
                    spaceBetween={30}
                    centeredSlides={true}
                    freeMode={true}
                    navigation={false}
                    watchSlidesProgress={true}
                    modules={[FreeMode, Navigation]}
                  >
                   ...
                  </Swiper>

使用样式 Prop