Flickity CSS 样式未应用答案

【问题标题】：Flickity CSS Styles not Being AppliedFlickity CSS 样式未应用
【发布时间】：2021-09-13 04:03:53
【问题描述】：

非常简单的问题，我认为它可能与 question 有关，但在 Vue 而不是 Angular 中。我尝试应用于我的 Flickity 轮播的 CSS 样式不会为我的 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>

【问题讨论】：

标签： html css vue.js vuejs3 flickity

【解决方案1】：

如果我对问题的理解正确，您希望从父组件中覆盖 Flickity.vue 组件的一些样式。

使用Scoped CSS（即来自<style scoped>），样式仅应用于当前组件，而不应用于其子组件。如果您想坚持使用作用域 CSS，您可以使用 :deep() (::v-deep in Vue 2) 定位动态子级在你的选择器周围，如下所示。

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

demo 1

或者，您可以只使用普通/无范围的<style> 块。删除 scoped 属性就足够了。

demo 2

【讨论】：