欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 無法覆蓋vant的UI組件的樣式問題

 更新時間：2022年04月25日 10:42:24   作者：夢幻飛雪  
這篇文章主要介紹了vue 無法覆蓋vant的UI組件的樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

無法覆蓋vant的UI組件的樣式

有時候UI組件提供的默認的樣式不能滿足項目的需要，就需要我們對它的樣式進行修改，但是發(fā)現(xiàn)加了scoped后修改的樣式不起作用。

解決方法

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

<style scoped>
? .a >>> .b { /* ... */ }
</style>

以上的代碼會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

注意：如果你使用了Less或Sass等預處理器，可能無法>>>正確解析。

在這些情況下，您可以使用組合/deep/或::v-deep組合 - 兩者都是別名，>>>并且工作完全相同。

使用Less或Sass等預處理器的寫法如下：

.van-radio {
? /deep/ .van-radio__label {
? ? width: 500px;
? }
}

使用樣式穿透,強制覆蓋Vant原樣式

使用Vant組件的時候，我們會發(fā)現(xiàn)在某些場合組件的原樣式不符合我們的需求，這個時候我們就需要重寫組件的原樣式。

這個是組件的原樣式

因為style標簽添加了scope屬性，scope會保護樣式不被污染，這里要讓我們自己的樣式生效就必須使用樣式穿透，由父樣式穿透到子樣式：

.w-all >>> .van-field__control{text-align: right;}

在瀏覽器可以看到

  • text-align：left那一欄已經(jīng)被一條橫線劃掉，取而代之的是：

而這個，就是因為使用了樣式穿透強制覆蓋了原樣式，從而實現(xiàn)我們需要的樣式效果。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論