解決vant-UI庫修改樣式無效的問題
最近用vue寫頁面時(shí)，發(fā)現(xiàn)使用vant的有些UI組件，而又不能滿足自己的樣式，修改CSS樣式還是無效。css一般都會使用sass或者less，加了scoped后修改的樣式不起作用，即使加了important也沒用
vue項(xiàng)目中，當(dāng)<style>標(biāo)簽有scoped屬性時(shí)，它的 CSS 樣式只作用于當(dāng)前組件中的元素，父組件的樣式將不會滲透到子組件中。
解決辦法：
1.對于css語法起作用
使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件
上述代碼將會編譯成：
2.對于scss，less這類的預(yù)處理器
使用 /deep/ 操作符取而代之——這是一個(gè) >>> 的別名
代碼如下：
這樣修改樣式就有效啦~
補(bǔ)充知識：vant 無法覆蓋組件樣式
問題描述：
在修改組件樣式的時(shí)候，有些修改沒有效果，在瀏覽器也看不到修改的內(nèi)容。而 去掉 scoped 之后就會有效果。
<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庫修改樣式無效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了 Vue.js對象轉(zhuǎn)換的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
多頁vue應(yīng)用的單頁面打包方法(內(nèi)含打包模式的應(yīng)用)
這篇文章主要介紹了多頁vue應(yīng)用的單頁面打包方法(內(nèi)含打包模式的應(yīng)用)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決
最近開發(fā)中遇到了些問題,跟大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決辦法,需要的朋友可以參考下2023-01-01
公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了精讀《Vue3.0 Function API》，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
如何在Vue3中使用視頻庫Video.js實(shí)現(xiàn)視頻播放功能
在Vue3項(xiàng)目中集成Video.js庫,可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫Video.js實(shí)現(xiàn)視頻播放功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue?cli3配置image-webpack-loader方式
這篇文章主要介紹了vue?cli3配置image-webpack-loader方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue實(shí)現(xiàn)選擇城市功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Vue前端解析Excel數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03