Flickity CSS 样式未应用
Flickity CSS Styles not Being Applied
很简单的问题,我认为它可能与此 有关,但在 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>
如果我对问题的理解正确,你想从父组件中覆盖一些 Flickity.vue
组件的样式。
与Scoped CSS (i.e., from <style scoped>
), the styles are applied only to the current component and not its children. If you want to stick with scoped CSS, you can target the dynamic children with :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>
或者,您可以只使用 plain/unscoped <style>
块。删除 scoped
属性就足够了。
很简单的问题,我认为它可能与此
我是否遗漏了某个地方的 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>
如果我对问题的理解正确,你想从父组件中覆盖一些 Flickity.vue
组件的样式。
与Scoped CSS (i.e., from <style scoped>
), the styles are applied only to the current component and not its children. If you want to stick with scoped CSS, you can target the dynamic children with :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>
或者,您可以只使用 plain/unscoped <style>
块。删除 scoped
属性就足够了。