Gaya CSS tidak berjaya digunakan pada Flickity

Question

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;
    }

            

Answer 1

Jika saya memahami soalan dengan betul, anda ingin mengatasi gaya beberapa Flickity.vuekomponen 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>

Demo 1

Sebagai alternatif, anda boleh menggunakan <style>块。只需删除scopedproperties biasa/tidak berskop.

Demo 2