vue 無法覆蓋vant的UI組件的樣式問題
更新時間：2022年04月25日 10:42:24 作者：夢幻飛雪
這篇文章主要介紹了vue 無法覆蓋vant的UI組件的樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
無法覆蓋vant的UI組件的樣式
有時候UI組件提供的默認(rèn)的樣式不能滿足項目的需要，就需要我們對它的樣式進(jìn)行修改，但是發(fā)現(xiàn)加了scoped后修改的樣式不起作用。
解決方法
使用深度選擇器，將scoped樣式中的選擇器“深入”，即影響子組件
<style scoped>
? .a >>> .b { /* ... */ }
</style>以上的代碼會編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }注意：如果你使用了Less或Sass等預(yù)處理器，可能無法>>>正確解析。
在這些情況下，您可以使用組合/deep/或::v-deep組合 - 兩者都是別名，>>>并且工作完全相同。
使用Less或Sass等預(yù)處理器的寫法如下：
.van-radio {
? /deep/ .van-radio__label {
? ? width: 500px;
? }
}使用樣式穿透,強制覆蓋Vant原樣式
使用Vant組件的時候，我們會發(fā)現(xiàn)在某些場合組件的原樣式不符合我們的需求，這個時候我們就需要重寫組件的原樣式。
這個是組件的原樣式
因為style標(biāo)簽添加了scope屬性，scope會保護樣式不被污染，這里要讓我們自己的樣式生效就必須使用樣式穿透，由父樣式穿透到子樣式：
.w-all >>> .van-field__control{text-align: right;}
在瀏覽器可以看到
text-align：left那一欄已經(jīng)被一條橫線劃掉，取而代之的是：
而這個，就是因為使用了樣式穿透強制覆蓋了原樣式，從而實現(xiàn)我們需要的樣式效果。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue項目中頁面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問題
今天小編就為大家分享一篇解決vue項目中頁面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版
本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
capture事件修飾符的作用是給元素添加一個監(jiān)聽器，當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧2017-12-12
一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了理解vue中的?slot-scope=“scope“，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能示例
這篇文章主要介紹了vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能,結(jié)合實例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
Nuxt.js實現(xiàn)一個SSR的前端博客的示例代碼
這篇文章主要介紹了Nuxt.js實現(xiàn)一個SSR的前端博客的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue監(jiān)聽數(shù)據(jù)渲染DOM完以后執(zhí)行某個函數(shù)詳解
今天小編就為大家分享一篇Vue監(jiān)聽數(shù)據(jù)渲染DOM完以后執(zhí)行某個函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10