教你用模板做网站,瓦房店网站制作,室内设计多少钱,网站生成app注意#xff1a;使用vant 包#xff0c;需要把app.json 中 的style:v2 这句去掉 不然会出现样式混乱的问题
Vant Weapp组件库的使用 参考官网
vant官网
Vant Weapp 组件样式覆盖
Vant Weapp 基于微信小程序的机制#xff0c;为开发者提供了 3 种修改组件样式…注意使用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 typeprimary custom-classcustom-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;
}
