小程序 使用 UI 组件 Vant Weapp 、vant组件样式覆盖

注意：使用vant 包，需要把app.json 中 的"style:v2" 这句去掉 不然会出现样式混乱的问题

Vant Weapp组件库的使用 参考官网

vant官网

Vant Weapp 组件样式覆盖

Vant Weapp 基于微信小程序的机制，为开发者提供了 3 种修改组件样式的方法：

1. 解除样式隔离：在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

2. 使用外部样式类：需要注意的是普通样式类和外部样式类的优先级是未定义的，
使用时需要添加 !important 保证外部样式类的优先级

3. 使用css变量：在页面或全局对多个组件的样式做批量修改以进行主题样式的定制

第一种:解除样式隔离

在自定义组件中如果需要Vant Weapp 组件的样式，需要在自定义组件中的 .js 中解除
样式隔离，并且设置为shared 才能生效

Component({

 options:{
 
   styleIsolation:"shared"
   
 }
})

自定义组件的 wxss

.van-button--primary{
  font-size: 28rpx !important;
  background: red !important;
  border: 1px solid red !important;
}

第二种：使用外部样式类

在自定义组件的 wxml 中 给button 组件添加外部样式类 custom-class

<van-button type="primary" custom-class="custom-class">主要按钮</van-button>

然后在 wxss 文件中直接修改样式

.custom-class{
  font-size: 28rpx !important;
  background: red !important;
  border: 1px solid red !important;
}

第三种：使用 css 变量

使用场景：
如果需要多个页面或者一个组件中 需要批量修改组件、定制主题

到app.wxss 文件 定义page

page{
  --color:lightgreen;
}

然后到 使用 公共组件 wxss 中

.custom-class{
  font-size: 28rpx !important;
  background: var(--color) !important;
  border: 1px solid var(--color) !important;
}

原文地址：https://blog.csdn.net/weixin_44166849/article/details/140179307

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！