Flickity CSS Styles not Being Applied

Question

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>

score 1 · Accepted Answer · answered Jul 03 '21 at 05:31

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>

demo 1

Alternatively, you could just use a plain/unscoped <style> block. Removing the scoped attribute would be enough.

demo 2

Flickity CSS Styles not Being Applied

1 Answers1