使用vant-UI庫修改樣式無效的幾種解決方法

發(fā)布時(shí)間：2020-11-04 14:58:09 來源：億速云閱讀：3203 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)使用vant-UI庫修改樣式無效的幾種解決方法，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

最近用vue寫頁面時(shí)，發(fā)現(xiàn)使用vant的有些UI組件，而又不能滿足自己的樣式，修改CSS樣式還是無效。css一般都會(huì)使用sass或者less，加了scoped后修改的樣式不起作用，即使加了important也沒用

vue項(xiàng)目中，當(dāng)<style>標(biāo)簽有scoped屬性時(shí)，它的 CSS 樣式只作用于當(dāng)前組件中的元素，父組件的樣式將不會(huì)滲透到子組件中。

解決辦法：

1.對(duì)于css語法起作用

使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件

上述代碼將會(huì)編譯成：

2.對(duì)于scss，less這類的預(yù)處理器

使用 /deep/ 操作符取而代之——這是一個(gè) >>> 的別名

代碼如下：

使用vant-UI庫修改樣式無效的幾種解決方法

這樣修改樣式就有效啦~

補(bǔ)充知識(shí)：vant 無法覆蓋組件樣式

問題描述：

在修改組件樣式的時(shí)候，有些修改沒有效果，在瀏覽器也看不到修改的內(nèi)容。而去掉 scoped 之后就會(huì)有效果。

<style lang="scss" scoped>
</style>

三種解決方式：

1、在下面加一個(gè)不帶scoped的 <style> 標(biāo)簽處理例外情況

<style lang="scss" scoped>
</style><style lang="scss">
...
img {
  border-radius: 50%;
}
</style>

2、建一個(gè) css 文件，用來寫一些覆蓋樣式

3、在要覆蓋的樣式前加上 ::v-deep

....
 ::v-deep img {
  border-radius: 50%;
 }

關(guān)于使用vant-UI庫修改樣式無效的幾種解決方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

猜你喜歡