class 的样式优先级没有 app.json v2 高，导致被覆盖了

第1中办法，去掉v2

原因是这个导致的：

什么是 style:v2

官方解释：

微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。
本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

去掉他对 button 不影响，但是个人目前不知到对其它有没有影响！

没去掉 v2

去掉 v2

样式改变了

第2种办法，内置样式，style

用style

<button type="primary" style=" margin: 25rpx 15rpx 0 15rpx; border-radius: 40rpx;width: auto;" formType="submit">确认设置</button>

第3中办法，提高样式优先级 !imporant

wsxx

.btnPrimary{margin: 25rpx 15rpx 0 15rpx !important; border-radius: 40rpx;width: auto !important;
}

wxml

<button type="primary" class="btnPrimary" formType="submit">确认设置</button>

完美解决了这个问题，个人对去掉v2，不知会遇到什么问题，没有试过，毕竟是官方默认给我们加的，建议还是留着吧，你们说呢！

小程序button样式class无效问题相关推荐

维信小程序button样式重写
2019独角兽企业重金招聘Python工程师标准>>> 一.小程序button默认按钮样式重写以primary按钮为例: /**重写默认按钮样式**/ button[type='p ...
清除微信小程序button的默认样式
清除微信小程序button的默认样式文章目录清除微信小程序button的默认样式总结最近在微信小程序的开发过程中,经常的使用button按钮,但是我们要怎么样去除它们的默认样式呢? 一.去除b ...
零基础学小程序 —— 模板样式（三）
目录前言 1.什么是 WXSS 2.WXSS 和 CSS 的关系 3. rpx 3-1 什么是 rpx 尺寸单位 3-2 rpx 的实现原理 3-3 rpx 与 px 之间的单位换算 4. 样式导入 ...
微信小程序组件样式修改
微信小程序checkbox.radio.button.switch.swiper组件样式(CSS)修改 1.checkbox样式修改 /*checkbox整体大小*/ checkbox {width: ...
微信按钮android代码实现原理,微信小程序button标签open-type实现原理
这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信 ...
微信小程序text设置高度_微信小程序字体样式的设置
知识点: 1.常用字体样式属性 2.利用style和class 设置字体样式 3.在app.wxss 和 index.wxss中定义样式常用字体属性: 举列: 项目目录: 运行结果: 在index. ...
整理在小程序页面样式中引入阿里巴巴字体图标
整理在小程序页面样式中引入阿里巴巴字体库 1.登录阿里巴巴字体图标 2.在小程序项目中配置 1.登录阿里巴巴字体图标点我阿里巴巴字体图标库搜索需要的字体图标将需要的字体图标点击添加到购车中添加 ...
小程序css样式变量/api promise化
小程序css样式变量全局样式变量 <style> html{//css变量,在html作用域--main-color:#0c00000 } .box1,.box2{background- ...
微信小程序优惠券样式
微信小程序优惠券样式 <view class="coupon-view"><view class="coupon-left"></ ...

小程序button样式class无效问题

第1中办法，去掉v2

第2种办法，内置样式，style

第3中办法，提高样式优先级 !imporant

小程序button样式class无效问题相关推荐

最新文章

热门文章