最近用vue寫頁面時，發現使用vant的有些UI元件，而又不能滿足自己的樣式，修改CSS樣式還是無效。css一般都會使用sass或者less，加了scoped後修改的樣式不起作用，即使加了important也沒用

vue專案中，當<style>標籤有scoped屬性時，它的 CSS 樣式只作用於當前元件中的元素，父元件的樣式將不會滲透到子元件中。

解決辦法：

1.對於css語法起作用

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

上述程式碼將會編譯成：

2.對於scss，less這類的前處理器

使用 /deep/ 操作符取而代之——這是一個 >>> 的別名

程式碼如下：

這樣修改樣式就有效啦~

補充知識：vant 無法覆蓋元件樣式

問題描述：

在修改元件樣式的時候，有些修改沒有效果，在瀏覽器也看不到修改的內容。而 去掉 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庫修改樣式無效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。