Swiper Element（Web 组件） 更改样式

Swiper Element（Web 组件）无法使用正常的 .className 修改样式

需要通过组件对外暴露的 part 值修改，代码如下

swiper-container::part(button-prev),
swiper-container::part(button-next) {
  background-color: rgba($color: #000000, $alpha: .5);
  border-radius: 100%;
  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
}

swiper-container::part(scrollbar) {
  height: 6px !important;
}

对于一些没有 part 值的 可以使用官方提供的 injectStyles、injectStylesUrls 两个API进行修改

<swiper-container :injectStyles="injectStyles">
  <swiper-slide>1</swiper-slide>
  <swiper-slide>2</swiper-slide>
  <swiper-slide>3</swiper-slide>
</swiper-container>
<script>
const injectStyles = [`
  .swiper-scrollbar-drag {
    background-color: #008bf9 !important;
    opacity: .7 !important;
  }
  
  .swiper-button-prev svg,
  .swiper-button-next svg{
    width: 10px;
    height: auto !important;
  }
  
  .swiper-button-disabled {
    display: none !important;
  }
`]
</script>