Soalan yang agak mudah, saya fikir ia mungkin berkaitan dengan isu ini, tetapi dalam Vue dan bukannya Angular. Penggayaan CSS yang saya cuba gunakan pada karusel Flickity saya tidak dipaparkan dalam aplikasi Vue 3 saya. Dalam IDE gaya dikelabukan, tetapi apabila saya mengeditnya dalam penyemak imbas melalui pemeriksaan (cth. menukar lebar sel karusel) ia berfungsi dengan baik.
Adakah saya kehilangan import CSS tertentu yang membolehkan fail CSS saya menukar rupa reka letak yang diberikan dalam penyemak imbas dengan betul?
.carousel-cell { warna latar belakang: #248742; lebar: 300px; /* lebar penuh */ ketinggian: 160px; /* ketinggian karusel */ jidar kanan: 10px; } /* letak titik dalam karusel */ .flickity-page-dots { bawah: 0px; } /* bulatan putih */ .flickity-page-dots .dot { lebar: 12px; ketinggian: 12px; kelegapan: 1; latar belakang: putih; sempadan: 2px putih pepejal; }
Jika saya memahami soalan dengan betul, anda ingin mengatasi gaya beberapa
Flickity.vue
komponen dalam komponen induk.GunakanSkop CSS(iaitu
),样式仅应用于当前组件而不是其子组件。如果您想继续使用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
) .Demo 1
Sebagai alternatif, anda boleh menggunakan
块。只需删除
scoped
properties biasa/tidak berskop.Demo 2