不应用Flickity CSS样式

Question

非常简单的问题，我认为它可能与这个问题有关，但在Vue中，而不是角。CSS样式，我试图应用到我的Flickity旋转木马没有渲染我的Vue 3应用程序。在IDE中，样式是灰色的，但是当我通过检查在浏览器中编辑它们(例如，改变旋转木马-单元格宽度)时，它工作得很好。

我是否遗漏了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组件的样式。

使用https://vue-loader.vuejs.org/guide/scoped-css.html (即来自<style scoped>)，样式只应用于当前组件，而不应用于其子组件。如果您想继续使用作用域CSS，您可以在选择器周围设置带有(第二卷)的动态子元素，如下所示。

由于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