Les styles CSS n'ont pas été appliqués avec succès à Flickity

Question

Question assez simple, je pense que cela peut être lié à ce problème, mais dans Vue au lieu d'Angular. Le style CSS que j'essaie d'appliquer à mon carrousel Flickity ne s'affiche pas dans mon application Vue 3. Dans l'EDI, les styles sont grisés, mais lorsque je les modifie dans le navigateur via une inspection (par exemple en modifiant la largeur de la cellule du carrousel), cela fonctionne bien.

Est-ce qu'il me manque une certaine importation CSS qui permettrait à mes fichiers CSS de modifier correctement l'apparence de la mise en page rendue dans le navigateur ?

Answer 1

Si je comprends bien la question, vous souhaitez remplacer les styles de certains Flickity.vuecomposants du composant parent.

Utilisez Scoped CSS (c'est-à-dire <style scoped>），样式仅应用于当前组件而不是其子组件。如果您想继续使用Scoped CSS，您可以在选择器周围使用:deep()（Vue 2中的::v-deep) pour cibler les composants enfants dynamiques comme indiqué ci-dessous.

Étant donné que le composant Flickity.vue组件自身对.carousel-cell的作用域样式具有更高的CSS特异性，父组件需要提高其特异性（例如，使用!important lui-même a une spécificité CSS plus élevée pour les styles étendus de .carousel-cell, le composant parent doit améliorer sa spécificité (par exemple, utilisez !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>

Démo 1

Alternativement, vous pouvez simplement utiliser des propriétés <style>块。只需删除scoped normales/sans portée.

Démo 2