1 背景
在使用vant組件開發(fā)微信小程序的時候，想更改vant組件內(nèi)部樣式，達(dá)到自己想要的目的（van-grid組件改成宮格背景色為透明，默認(rèn)為白色），官網(wǎng)沒有示例，通過以下幾步修改成功。
2 步驟
2.1 查看官方文檔
Grid 外部樣式類支持修改Grid組件樣式，我們在組件上添加該屬性即可，文件如下
| 類名 | 說明 |
|---|---|
| custom-class | 根節(jié)點樣式類 |
2.2 wxml文件
<van-grid column-num="4" custom-class="grid" border="{{false}}">
<van-grid-item use-slot wx:for="{{ menuList }}">
<navigator url="{{item.pagePath}}">
<view class="cont-item">
<image src="/image/page/{{item.imgSrc}}"></image>
<text>{{ item.name }}</text>
</view>
</navigator>
</van-grid-item>
</van-grid>
2.3 wxss文件
這里我們通過查看組件源碼知曉應(yīng)該修改.van-grid-item__content樣式類，代碼如下：
.grid .van-grid-item__content {
background-color: rgba(255, 255, 255, 0);
}
2.4 修改前后效果對比
修改前：
? 
修改后：
文章來源：http://www.zghlxwxcb.cn/news/detail-699735.html
注：本教程僅適用于page頁面更改vant組件樣式，若是自定義組件想修改vant組件樣式，就需要更改組件樣式隔離屬性，大型項目不做推薦。文章來源地址http://www.zghlxwxcb.cn/news/detail-699735.html
到了這里，關(guān)于微信小程序修改vant組件樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
