CSS樣式未成功應用於Flickity

Question

相當簡單的問題，我認為它可能與這個問題有關，但是是在Vue中而不是Angular。 我嘗試應用於我的Flickity輪播的CSS樣式在我的Vue 3應用程式中無法渲染。在IDE中，樣式被灰掉了，但是當我透過檢查（例如更改carousel-cell的寬度）在瀏覽器中編輯它們時，它可以正常工作。

我是否遺漏了某個CSS導入，以使我的CSS檔案正確地改變瀏覽器中呈現的佈局的外觀？

<template>
    <div class="col d-block m-auto">
       <flickity ref="flickity" :options="flickityOptions">
       </flickity>
    </div>
</template>

<style scoped>
    .carousel-cell {
      background-color: #248742;
      width: 300px; /* full width */
      height: 160px; /* height of carousel */
      margin-right: 10px;
    }
    
      /* position dots in carousel */
    .flickity-page-dots {
      bottom: 0px;
    }
    /* white circles */
    .flickity-page-dots .dot {
      width: 12px;
      height: 12px;
      opacity: 1;
      background: white;
      border: 2px solid white;
    }
</style>

Answer 1

如果我正確理解了問題，您想要覆寫一些父元件中的Flickity.vue元件的樣式。

使用Scoped CSS（即<style scoped>），樣式只套用於目前元件而不是其子元件。如果您想繼續使用Scoped CSS，您可以在選擇器周圍使用:deep()（Vue 2中的::v-deep）來針對動態子元件進行定位，如下圖所示。

由於Flickity.vue元件本身對.carousel-cell的作用域樣式具有更高的CSS特異性，父元件需要提高其特異性（例如，使用!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>

示範1

或者，您可以使用普通/非作用域的<style>區塊。只需刪除scoped屬性即可。

示範2