小程序button样式class无效问题

导读:本篇文章讲解 小程序button样式class无效问题,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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,不知会遇到什么问题,没有试过,毕竟是官方默认给我们加的,建议还是留着吧,你们说呢!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/107109.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!