[swiper.js][vue] 커스텀 css 적용하기

swiper의 webcomponent를 활용하여 슬라이드를 구현하고 있었는데 슬라이드 앞뒤이동 버튼 색만 변경하려고하는데 !important를 줘도 아무리 안먹어서 뒤져보다가 정리함.

 

1. injectStyles 활용

<template>
  <swiper-container ref="swiperRef" init="false"></swiper-container>
</template>

<script setup>
import { ref, watch } from "vue";
import { register } from "swiper/element/bundle";

register();

const swiperRef = ref();
watch(swiperRef, (n, o) => {
  if (n != o) {
    const params = {
      injectStyles: [`
        .swiper-button-next,
        .swiper-button-prev {
          color: red !important;
        };
        .swiper-pagination-bullet-active {
          background-color: red !important;
        }
      `]
    };

    Object.assign(swiperRef.value, params);
    swiperRef.value.initialize();
  }
});
</script>

먼저 html태그 swiper-container에 ref를 설정해주고 init값을 false로 둬야함.

 

그리고 watch에 ref가 들어왔을때 위와 같은 코드를 넣어주고 initialize()를 해주면 잘 적용된다.

참고로 onMounted는 안먹히니께 주의!

 

이게 공식 설명서에 있긴한데 묘하게 빠진 부분이 있어서 안먹힌단말이지..