Flickity CSS样式未应用

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>

Answer 1

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

使用作用域CSS(即来自<style 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