微信小程序修改vant组件样式

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组件样式,就需要更改组件样式隔离属性,大型项目不做推荐。

相关推荐
尘浮生1 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen4 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
中云DDoS CC防护蔡蔡11 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼14 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857516 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027717 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
尘浮生2 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven