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