CSS-Stile wurden nicht erfolgreich auf Flickity angewendet

Question

Eine recht einfache Frage. Ich denke, sie hängt möglicherweise mit diesem Problem zusammen, aber eher in Vue als in Angular. Der CSS-Stil, den ich auf mein Flickity-Karussell anwenden möchte, wird in meiner Vue 3-App nicht gerendert. In der IDE sind die Stile ausgegraut, aber wenn ich sie im Browser per Inspektion bearbeite (z. B. durch Ändern der Breite der Karussellzelle), funktioniert es einwandfrei.

Fehlt mir ein bestimmter CSS-Import, der es meinen CSS-Dateien ermöglichen würde, das Erscheinungsbild des im Browser gerenderten Layouts korrekt zu ändern?

<template>
    <div class="col d-block m-auto">
       <flickity ref="flickity" :options="flickityOptions">
       </flickity>
    </div>
</template>

<Stilbereich>
    .carousel-cell {
      Hintergrundfarbe: #248742;
      Breite: 300px; /* volle Breite */
      Höhe: 160px; /* Höhe des Karussells */
      Rand rechts: 10px;
    }
    
      /* Punkte im Karussell positionieren */
    .flickity-page-dots {
      unten: 0px;
    }
    /* weiße Kreise */
    .flickity-page-dots .dot {
      Breite: 12px;
      Höhe: 12px;
      Deckkraft: 1;
      Hintergrund: weiß;
      Rand: 2 Pixel durchgehend weiß;
    }
</style>

Answer 1

如果我正确理解了问题，您想要覆盖一些父组件中的Flickity.vue组件的样式。

使用Scoped CSS（即<style scoped>），样式仅应用于当前组件而不是其子组件。如果您想继续使用Scoped CSS，您可以在选择器周围使用:deep()（Vue 2中的::v-deep）来针对动态子组件进行定位，如下所示。

由于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>

演示1

或者，您可以使用普通/非作用域的<style>块。只需删除scoped属性即可。

演示2