解決vant-UI庫修改樣式無效的問題
更新時間：2020年11月03日 11:37:09 作者：郁美人
這篇文章主要介紹了解決vant-UI庫修改樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近用vue寫頁面時，發(fā)現(xiàn)使用vant的有些UI組件，而又不能滿足自己的樣式，修改CSS樣式還是無效。css一般都會使用sass或者less，加了scoped后修改的樣式不起作用，即使加了important也沒用
vue項目中，當<style>標簽有scoped屬性時，它的 CSS 樣式只作用于當前組件中的元素，父組件的樣式將不會滲透到子組件中。
解決辦法：
1.對于css語法起作用
使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件
上述代碼將會編譯成：
2.對于scss，less這類的預(yù)處理器
使用 /deep/ 操作符取而代之——這是一個 >>> 的別名
代碼如下：
這樣修改樣式就有效啦~
補充知識：vant 無法覆蓋組件樣式
問題描述：
在修改組件樣式的時候，有些修改沒有效果，在瀏覽器也看不到修改的內(nèi)容。而 去掉 scoped 之后就會有效果。
<style lang="scss" scoped> </style>
三種解決方式：
1、在下面加一個不帶scoped的 <style> 標簽處理例外情況
<style lang="scss" scoped>
</style><style lang="scss">
...
img {
border-radius: 50%;
}
</style>
2、建一個 css 文件，用來寫一些覆蓋樣式
3、在要覆蓋的樣式前加上 ::v-deep
....
::v-deep img {
border-radius: 50%;
}
以上這篇解決vant-UI庫修改樣式無效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
前端請求超時截斷axios?timeout設(shè)置未生效情況解決記錄
在項目中遇到了后臺接口返回數(shù)據(jù)慢的時候往往需要設(shè)置請求失效時間,在項目中遇到設(shè)置timeout失效問題由此記錄下來,這篇文章主要給大家介紹了前端請求超時截斷axios?timeout設(shè)置未生效情況解決的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題(附實例)
最近了解到mqtt這樣一個協(xié)議,可以在web上達到即時通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
從零開始學(xué)Vue，通過一些例子，讓大家概覽一些基本的概念和特性，理解Vue的基礎(chǔ)知識,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Vue.js中組件中的slot實例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了vue項目中自動導(dǎo)入svg并愉快的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了淺談在Vue-cli里基于axios封裝復(fù)用請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
今天小編就為大家分享一篇當vue路由變化時,改變導(dǎo)航欄的樣式方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue子組件如何使用父組件傳過來的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04