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