vue 修改vant自帶的樣式過(guò)程
修改vant自帶的樣式
今天用vue寫(xiě)頁(yè)面時(shí)，發(fā)現(xiàn)使用vant的有些UI組件，而又不能滿足自己的樣式，修改CSS樣式還是無(wú)效。
css一般都會(huì)使用sass或者less，加了scoped后修改的樣式不起作用，即使加了important也沒(méi)用。
在vue項(xiàng)目中，當(dāng)style 標(biāo)簽有scoped屬性時(shí)，它的 CSS 樣式只作用于當(dāng)前組件中的元素，父組件的樣式將不會(huì)滲透到子組件中。
解決辦法
1.對(duì)于css語(yǔ)法起作用
使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件
上述代碼將會(huì)編譯成：
2.對(duì)于scss，less這類(lèi)的預(yù)處理器
使用 /deep/ 操作符取而代之——這是一個(gè) >>> 的別名
代碼如下：
這樣修改樣式就有效啦。
vant的樣式怎么修改不了？
在vue中寫(xiě)<style lang="scss" scoped> 時(shí)候都要加上這個(gè) scoped 用于避免全局污染
但是加上了scoped會(huì)導(dǎo)致無(wú)法修改 vant 框架組件中本身的樣式但是scoped我們不能去掉
即使寫(xiě)不了vant中的樣式我們也不能去掉那么在怎么不去掉的情況下實(shí)現(xiàn)樣式呢？
如果有scss的話只要在原有的樣式類(lèi)前面加 /deep/ 即可
/deep/ .van-cell{
? ? background: #F39894;
? ? color: white;
}
/deep/ .van-icon::before{
? ? color: white;
}這樣就可以在有scoped的情況下 也能修改組件的樣式了
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js3.2的vnode部分優(yōu)化升級(jí)使用示例詳解
這篇文章主要為大家介紹了Vue.js3.2的vnode部分優(yōu)化升級(jí)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
默認(rèn)情況下，寫(xiě)在.vue組件中的樣式會(huì)全局生效，因此很容易造成多個(gè)組件之間的樣式?jīng)_突問(wèn)題。導(dǎo)致組件之間樣式?jīng)_突的根本原因，我們接下來(lái)探究一下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)簡(jiǎn)單上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
UniApp中實(shí)現(xiàn)類(lèi)似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類(lèi)似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類(lèi)標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類(lèi)的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),2023-10-10
require.js 加載 vue組件 r.js 合并壓縮的實(shí)例
這篇文章主要介紹了require.js 加載 vue組件 r.js 合并壓縮的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了vue中的嚴(yán)格模式如何取消，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
關(guān)于Vue-cli3煩人的eslint問(wèn)題
這篇文章主要介紹了關(guān)于Vue-cli3煩人的eslint問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了解決vue.js not detected的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02