Pretty simple issue, I think it may be related to this question but in Vue instead of Angular. The CSS styling I try to apply to my Flickity carousel doesn't render for my Vue 3 app. In the IDE the styles are greyed out, but when I edit them in my browser via the inspection (like changing the carousel-cell width, for example), it works fine.
Am I missing a CSS import somewhere to make my CSS file correctly alter the appearance of my rendered layout in a browser?
<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>
If I understand the problem correctly, you'd like to override some of the Flickity.vue component's styles from the parent.
With 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)
around your selectors, as shown below.
Since the Flickity.vue component's own scoped styles for .carousel-cell have higher CSS specificity, the parent component would need to bump up its specificity (e.g., by 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>
Alternatively, you could just use a plain/unscoped <style> block. Removing the scoped attribute would be enough.