溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下vue怎么修改vant自帶的樣式的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
今天用vue寫頁面時，發現使用vant的有些UI組件，而又不能滿足自己的樣式，修改CSS樣式還是無效。
css一般都會使用sass或者less，加了scoped后修改的樣式不起作用，即使加了important也沒用。
在vue項目中，當style 標簽有scoped屬性時，它的 CSS 樣式只作用于當前組件中的元素，父組件的樣式將不會滲透到子組件中。
1.對于css語法起作用
使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件
上述代碼將會編譯成：
2.對于scss，less這類的預處理器
使用 /deep/ 操作符取而代之——這是一個 >>> 的別名
代碼如下：
這樣修改樣式就有效啦。
在vue中寫<style lang="scss" scoped> 時候都要加上這個 scoped 用于避免全局污染
但是加上了scoped會導致無法修改 vant 框架組件中本身的樣式但是scoped我們不能去掉
即使寫不了vant中的樣式我們也不能去掉那么在怎么不去掉的情況下實現樣式呢？
如果有scss的話只要在原有的樣式類前面加 /deep/ 即可
/deep/ .van-cell{
background: #F39894;
color: white;
}
/deep/ .van-icon::before{
color: white;
}這樣就可以在有scoped的情況下 也能修改組件的樣式了
以上就是“vue怎么修改vant自帶的樣式”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
