有時候UI元件提供的預設的樣式不能滿足專案的需要，就需要我們對它的樣式進行修改，但是發現加了scoped後修改的樣式不起作用。

解決方法：

使用深度選擇器，將scoped樣式中的選擇器“深入”，即影響子元件

<style scoped>
 .a >>> .b { /* ... */ }
</style>

以上的程式碼會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

注意：如果你使用了Less或Sass等前處理器，可能無法>>>正確解析。在這些情況下，您可以使用組合/deep/或::v-deep組合 - 兩者都是別名，>>>並且工作完全相同。

使用Less或Sass等前處理器的寫法如下：

.van-radio {
 /deep/ .van-radio__label {
  width: 500px;
 }
}

補充知識：vue+vant移動端遇到的那些問題

1、專案引用了lib-flexible 跟px2rem-loader做適配，然後真機測試的時候發現字型在手機上顯示的很小。【推薦去看下px2rem-loader的文件】

原因+解決：百度說應該在後面加上/*px*/（font-size:14px;/*px*/），這裡這麼設定時，字型的大小要為兩倍，如你想讓字型顯示為14px,css程式碼則為【font-size:28px;/*px*/】，對於border這些不想轉換為rem的（或者說沒必要轉換的），在後面加上/*no*/；

2、使用vant元件時發現樣式什麼的跟vant官網的demo天差地別

原因+解決：是引入的適配框架把單位都給轉換成rem了，所以gg了，自己調整樣式就好了

3、頁面寫style用了scoped，調整vant元件樣式的時候，不起作用【這裡涉及了vue最重要的點：父子元件，半吊子的我完全沒吃透父子關係】

原因+解決：scoped的作用是讓樣式應用於當前頁，不影響其他的頁面的樣式，而當你用了vant元件想調整它的元件樣式時，這個元件是子元件，因為你用了scoped，所以影響不到它，這個時候你應該使用deep——深入選擇器，下圖就是用法，如果你用了less或者sass這些，寫法請自行百度！！！(本人略慫，不敢在專案趕得時候用太多不熟的東西)，當然啦，你也可以任性的在公共css樣式檔案裡寫，我說的就跟你沒半毛錢關係了，謹防被打死就好！

4、使用了vant的搜尋元件，然後在ios上測試時發現，input框被放大了

原因+解決：在index.html的頭部加上"maximum-scale=1.0,user-scalable=0"，禁止它放大

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />

5、vant的元件，我是按需引入的，在main.js中引入，使用toast元件時，引用了，直接在要用的頁面的方法裡this.$toast()這樣就可以，然後使用vant的圖片預覽元件的時候以為這樣也可以，結果gg，發現直接在頁面上引入，照著文件那樣寫就可以。

原因+解決：仔細對比了toast跟imagePreview的文件介紹，發現toast是有介紹說它掛載到了vue上。。。emmmm，imagePreview怕是沒掛載，掛載上去之後就可以用了

6、 跳轉頁面時標題名沒切換，比如首頁跳到聯絡頁，頁面頭部還是首頁【看Vue Router文件】

原因+解決：因為我沒做什麼修改操作，所以不會變。在路由router/index.js中對路由配置 meta 欄位，再在main.js中使用全域性前置守衛

router.beforeEach((to,from,next) => {
 //修改標題
 if (to.meta.title) {
  document.title = to.meta.title;
 }
 next();
});

第一次將自己自學的東西應用到專案中，新專案開始，自己作為專案中唯一的前端，不怕死的用了vue，其實也是個半吊子，現在一期開發結束，總結下這些遇到的問題，可能很基礎，但是畢竟是自己遇到的，還是要記錄下來的！

以上這篇解決vue加scoped後就無法修改vant的UI元件的樣式問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。