Rumah > Soal Jawab > teks badan
P粉4821083102023-08-27 10:46:27
Jika saya memahami soalan dengan betul, anda ingin mengatasi gaya beberapa Flickity.vue
komponen dalam komponen induk.
Gunakan Skop CSS (iaitu <style scoped>
),样式仅应用于当前组件而不是其子组件。如果您想继续使用Scoped CSS,您可以在选择器周围使用:deep()
(Vue 2中的::v-deep
) untuk menyasarkan komponen kanak-kanak dinamik seperti yang ditunjukkan di bawah.
Memandangkan komponen Flickity.vue
组件自身对.carousel-cell
的作用域样式具有更高的CSS特异性,父组件需要提高其特异性(例如,使用!important
itu sendiri mempunyai kekhususan CSS yang lebih tinggi untuk gaya skop .carousel-cell
, komponen induk perlu meningkatkan kekhususannya (cth., gunakan !important
) .
<style scoped> :deep(.carousel-cell) { background-color: red !important; width: 300px !important; height: 160px !important; margin-right: 10px !important; } /* position dots in carousel */ :deep(.flickity-page-dots) { bottom: 0px; } /* white circles */ :deep(.flickity-page-dots .dot) { width: 12px; height: 12px; opacity: 1; background: blue; border: 2px solid white; } </style>
Sebagai alternatif, anda boleh menggunakan <style>
块。只需删除scoped
properties biasa/tidak berskop.