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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在vue中使用express-mock搭建mock服務的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務的方法，文中給大家提到了在vue-test-utils 中 mock 全局對象的相關知識 ,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細介紹了vuex實現(xiàn)簡單的購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
Nvue是一個基于weex改進的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁面用法uniapp,需要的朋友可以參考下2023-12-12
不過 Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應用，仍然需要了解大量 Vue 設計概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了在vue中設置滾動條的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue自定義驗證之日期時間選擇器詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
關于vue項目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法
sockjs-node 是一個JavaScript庫,提供跨瀏覽器JavaScript的API,創(chuàng)建了一個低延遲、全雙工的瀏覽器和web服務器之間通信通道,這篇文章主要介紹了vue項目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法,需要的朋友可以參考下2023-12-12
Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng),需要的朋友可以參考下2019-12-12
使用Vue的slot插槽分發(fā)父組件內容實現(xiàn)高度復用、更加靈活的組件(推薦)
這篇文章主要介紹了使用Vue的slot插槽分發(fā)父組件內容實現(xiàn)高度復用、更加靈活的組件 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue3中動態(tài)獲取高寬,實現(xiàn)思路大概是將監(jiān)聽到的高度賦給你需要設置的對象，本文通過實例代碼給大家介紹的非常詳細，需要的朋友一起看看吧2023-10-10