1 背景
在使用vant组件开发微信小程序的时候,想更改vant组件内部样式,达到自己想要的目的(van-grid组件改成宫格背景色为透明,默认为白色),官网没有示例,通过以下几步修改成功。
2 步骤
2.1 查看官方文档
Grid 外部样式类支持修改Grid组件样式,我们在组件上添加该属性即可,文件如下
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
2.2 wxml文件
html
<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文件
这里我们通过查看组件源码知晓应该修改.van-grid-item__content
样式类,代码如下:
css
.grid .van-grid-item__content {
background-color: rgba(255, 255, 255, 0);
}
2.4 修改前后效果对比
修改前:
修改后:
注:本教程仅适用于page页面更改vant组件样式,若是自定义组件想修改vant组件样式,就需要更改组件样式隔离属性,大型项目不做推荐。