vue 修改vant自帶的樣式過程
修改vant自帶的樣式
今天用vue寫頁面時，發(fā)現(xiàn)使用vant的有些UI組件，而又不能滿足自己的樣式，修改CSS樣式還是無效。
css一般都會使用sass或者less，加了scoped后修改的樣式不起作用，即使加了important也沒用。
在vue項(xiàng)目中，當(dāng)style 標(biāo)簽有scoped屬性時，它的 CSS 樣式只作用于當(dāng)前組件中的元素，父組件的樣式將不會滲透到子組件中。
解決辦法
1.對于css語法起作用
使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件
上述代碼將會編譯成：
2.對于scss，less這類的預(yù)處理器
使用 /deep/ 操作符取而代之——這是一個 >>> 的別名
代碼如下：
這樣修改樣式就有效啦。
vant的樣式怎么修改不了？
在vue中寫<style lang="scss" scoped> 時候都要加上這個 scoped 用于避免全局污染
但是加上了scoped會導(dǎo)致無法修改 vant 框架組件中本身的樣式但是scoped我們不能去掉
即使寫不了vant中的樣式我們也不能去掉那么在怎么不去掉的情況下實(shí)現(xiàn)樣式呢？
如果有scss的話只要在原有的樣式類前面加 /deep/ 即可
/deep/ .van-cell{
? ? background: #F39894;
? ? color: white;
}
/deep/ .van-icon::before{
? ? color: white;
}這樣就可以在有scoped的情況下 也能修改組件的樣式了
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了在vue中如何通過iframe方式加載本地的vue頁面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下2023-06-06
Vue實(shí)現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
本文主要介紹了elementUI彈窗里的表單重置不生效問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue3+ant?design的form數(shù)組表單校驗(yàn)方法
這篇文章主要介紹了vue3+ant?design的form數(shù)組表單，如何校驗(yàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-09-09
解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題
這篇文章主要介紹了解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
利用Vue v-model實(shí)現(xiàn)一個自定義的表單組件
本篇文章主要介紹了利用Vue v-model實(shí)現(xiàn)一個自定義的表單組件的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了vue-amap根據(jù)地址回顯地圖并mark的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vuex數(shù)據(jù)持久化的兩種方式:手動存儲和vuex-persistedstate插件詳解
這篇文章主要介紹了Vuex數(shù)據(jù)持久化的兩種方式:手動存儲和vuex-persistedstate插件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件,如果有會返回重名文件的名稱數(shù)組,這些文件需要一個一個的向用戶確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下2024-02-02
key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對比時辨識VNodes。這篇文章主要給大家介紹Vue中key的作用，感興趣的朋友跟隨小編一起看看吧2020-06-06