1. 程式人生 > >使用scoped穿透方法實現修改vue中mint UI元件樣式

使用scoped穿透方法實現修改vue中mint UI元件樣式

效果:


程式碼:

<div class="goods-swiper">
  <mt-swipe :auto="5000" :show-indicators="true">
    <mt-swipe-item v-for="(item,index) in goodSwiperLists" :key="index"><img :src="item.image"></mt-swipe-item>
  </mt-swipe>
</div>

修改mint UI swiper元件預設樣式.mint-swipe-indicator和.mint-swipe-indicator.is-active,在頁面中style使用了scoped之後,直接修改樣式根本實現不了,之前一直是給要修改的單獨加一個class使用<style scoped></style>和<style></style>兩個。

    另外一種方式就是使用scoped穿透方法。

程式碼:


使用‘>>>’樣式修改成功。