CSS styles were not successfully applied to Flickity

Question

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.

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?

<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

If I understand the question correctly, you want to override the styles of some Flickity.vue components 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-deep in Vue 2) around the selector to target dynamic child components, As follows.

Since the Flickity.vue component 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 the scoped attribute.

Demo 2