CSS styles were not successfully applied to Flickity
P粉412533525
2023-08-26 20:25:09
<p>Quite simple question, I think it may be related to this issue, but in Vue rather than Angular.
The CSS styling I'm trying to apply to my Flickity carousel doesn't render in my Vue 3 app. In the IDE the styles are grayed out, but when I edit them in the browser via inspection (e.g. changing the width of the carousel-cell) it works fine. </p>
<p>Am I missing a certain CSS import that would allow my CSS files to correctly change the appearance of the layout rendered in the browser? </p>
<pre class="brush:html;toolbar:false;"><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>
</pre>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If I understand the question correctly, you want to override the styles of some
Flickity.vuecomponents in the parent component.With Scoped CSS (i.e.
<style scoped>), styles are only applied to the current component and not its child components. If you want to continue using Scoped CSS, you can use:deep()(::v-deepin Vue 2) around the selector to target dynamic child components, As follows.Since the
Flickity.vuecomponent itself has higher CSS specificity for.carousel-cell's scoped styles, the parent component needs to increase its specificity (e.g., using!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
Alternatively, you can use a normal/non-scoped
<style>block. Just remove thescopedattribute.Demo 2