CSS-Stile wurden nicht erfolgreich auf Flickity angewendet
P粉412533525
2023-08-26 20:25:09
<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>
如果我正确理解了问题,您想要覆盖一些父组件中的
Flickity.vue
组件的样式。使用Scoped CSS(即
<style scoped>
),样式仅应用于当前组件而不是其子组件。如果您想继续使用Scoped CSS,您可以在选择器周围使用:deep()
(Vue 2中的::v-deep
)来针对动态子组件进行定位,如下所示。由于
Flickity.vue
组件自身对.carousel-cell
的作用域样式具有更高的CSS特异性,父组件需要提高其特异性(例如,使用!important
)。演示1
或者,您可以使用普通/非作用域的
<style>
块。只需删除scoped
属性即可。演示2