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