撤底覆蓋vant框架樣式

2021-10-06 00:11:19 字數 759 閱讀 2094

vant的樣式採用less所寫,.

所以,如果你期待通過如下方式修改 weui-cells 的樣式。是沒有任何效果的:

這是因為,所有的scoped中的css最終編譯出來都會變成這樣:

.****[data-v-17bb9a05] .weui-cells[data-v-17bb9a05]

解決方法一:

除非你將 scoped 移除,或者新建乙個沒有 scoped 的 style(乙個.vue檔案允許多個style)

<

style

scoped

>

.****

style

>

<

style

>

.**** .weui-cells

style

>

解決方法二:

深度作用選擇器 >>>  

(注意,只作用於css)

.**** >>> .weui-cells

但如果是sass/less的話可能無法識別,這時候需要使用 /deep/ 選擇器。

在vue-cli3編譯時,deep的方式會報錯或者警告。可以

使用如下

Vue無法覆蓋Vant樣式的問題

問題描述 開發專案的時候有用到van collapse item元件,底色預設白色,需求是灰色底色,加了額外的class不生效 解決方案 在class前面加上 deep 示例 dym collapse deep van collapse item content 外麵包一層dym collapse是...

html中引用vant彈框元件

頁面報錯 uncaught typeerror cannot read property alert of undefined使用this在方法中無法定向到引數,所以使用let that this 重定向 let that this post url function res then catch ...

使用樣式穿透,強制覆蓋Vant原樣式

使用vant元件的時候,我們會發現在某些場合元件的原樣式不符合我們的需求,這個時候我們就需要重寫元件的原樣式。這個是元件的原樣式 因為style標籤新增了scope屬性,scope會保護樣式不被汙染,這裡要讓我們自己的樣式生效就必須使用樣式穿透,由父樣式穿透到子樣式 w all van field ...