CSS-Stile wurden nicht erfolgreich auf Flickity angewendet
P粉412533525
P粉412533525 2023-08-26 20:25:09
0
1
598
<p>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. </p> <p>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? </p> <pre class="brush:html;toolbar:false;"><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> </pre>
P粉412533525
P粉412533525

Antworte allen(1)
P粉482108310

如果我正确理解了问题,您想要覆盖一些父组件中的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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage