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