vue 無(wú)法覆蓋vant的UI組件的樣式問(wèn)題
無(wú)法覆蓋vant的UI組件的樣式
有時(shí)候UI組件提供的默認(rèn)的樣式不能滿足項(xiàng)目的需要，就需要我們對(duì)它的樣式進(jìn)行修改，但是發(fā)現(xiàn)加了scoped后修改的樣式不起作用。
解決方法
使用深度選擇器，將scoped樣式中的選擇器“深入”，即影響子組件
<style scoped>
? .a >>> .b { /* ... */ }
</style>以上的代碼會(huì)編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }注意：如果你使用了Less或Sass等預(yù)處理器，可能無(wú)法>>>正確解析。
在這些情況下，您可以使用組合/deep/或::v-deep組合 - 兩者都是別名，>>>并且工作完全相同。
使用Less或Sass等預(yù)處理器的寫法如下：
.van-radio {
? /deep/ .van-radio__label {
? ? width: 500px;
? }
}使用樣式穿透,強(qiáng)制覆蓋Vant原樣式
使用Vant組件的時(shí)候，我們會(huì)發(fā)現(xiàn)在某些場(chǎng)合組件的原樣式不符合我們的需求，這個(gè)時(shí)候我們就需要重寫組件的原樣式。
這個(gè)是組件的原樣式
因?yàn)閟tyle標(biāo)簽添加了scope屬性，scope會(huì)保護(hù)樣式不被污染，這里要讓我們自己的樣式生效就必須使用樣式穿透，由父樣式穿透到子樣式：
.w-all >>> .van-field__control{text-align: right;}
在瀏覽器可以看到
text-align：left那一欄已經(jīng)被一條橫線劃掉，取而代之的是：
而這個(gè)，就是因?yàn)槭褂昧藰邮酱┩笍?qiáng)制覆蓋了原樣式，從而實(shí)現(xiàn)我們需要的樣式效果。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法，文中給大家提到了在vue-test-utils 中 mock 全局對(duì)象的相關(guān)知識(shí) ,需要的朋友可以參考下2018-11-11
vuex實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
Nvue是一個(gè)基于weex改進(jìn)的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁(yè)面用法uniapp,需要的朋友可以參考下2023-12-12
不過(guò) Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計(jì)概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了在vue中設(shè)置滾動(dòng)條的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue自定義驗(yàn)證之日期時(shí)間選擇器詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02
關(guān)于vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法
sockjs-node 是一個(gè)JavaScript庫(kù),提供跨瀏覽器JavaScript的API,創(chuàng)建了一個(gè)低延遲、全雙工的瀏覽器和web服務(wù)器之間通信通道,這篇文章主要介紹了vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法,需要的朋友可以參考下2023-12-12
Vue+Element實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng),需要的朋友可以參考下2019-12-12
使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件(推薦)
這篇文章主要介紹了使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue3中動(dòng)態(tài)獲取高寬,實(shí)現(xiàn)思路大概是將監(jiān)聽(tīng)到的高度賦給你需要設(shè)置的對(duì)象，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友一起看看吧2023-10-10