CSS樣式未成功應用於Flickity
P粉412533525
P粉412533525 2023-08-26 20:25:09
0
1
450
<p>相當簡單的問題,我認為它可能與這個問題有關,但是是在Vue中而不是Angular。 我嘗試應用於我的Flickity輪播的CSS樣式在我的Vue 3應用程式中無法渲染。在IDE中,樣式被灰掉了,但是當我透過檢查(例如更改carousel-cell的寬度)在瀏覽器中編輯它們時,它可以正常工作。 </p> <p>我是否遺漏了某個CSS導入,以使我的CSS檔案正確地改變瀏覽器中呈現的佈局的外觀? </p> <pre class="brush:html;toolbar:false;"><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> </pre>
P粉412533525
P粉412533525

全部回覆(1)
P粉482108310

如果我正確理解了問題,您想要覆寫一些父元件中的Flickity.vue元件的樣式。

使用Scoped CSS(即

示範1

或者,您可以使用普通/非作用域的