今天在寫小程序的時候，剛好遇到，以前遇到解決了之后忘記記錄，今天記錄下！

一般組件的基礎樣式會跟ui設計稿有些出入，就得改動！
使用vant的話，官方就有提供方法，比如復選框

我在項目中用custom-class居多，設置根節點后就能操作；
比如修改復選框禁用時的樣式

wxml<van-checkbox-group value="{{ result }}" bind:change="onChange"><van-checkbox name="a" custom-class="checkClass">復選框 a</van-checkbox><van-checkbox name="b" custom-class="checkClass">復選框 b</van-checkbox></van-checkbox-group> wxss.checkClass .van-checkbox__icon--disabled{background:#ccc;}

如果是自定義組件中想要修改vant組件樣式，單單使用custom-class是沒有用的，這個時候無法修改下面的子元素，這是因為組件這里默認樣式隔離了，custom-class設置的節點名稱會加上前綴標以區分；
小程序官方也有提供解決方法；如果用了shared，之后別的頁面定義class的時候要注意不要命名沖突了

總結

以上是生活随笔為你收集整理的小程序之修改引用的vant组件样式（包括自定义组件中的vant样式）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。