【微信小程序】按钮button组件宽设置无效解决方案

问题背景：

给button组件添加一个class类名，在对应的wxss中编写宽的设置样式，竟然发现无效，审查元素后发现了原因，被小程序自带的样式影响了

当没有设置size="mini"的属性时，被小程序自带默认样式button:not([size=mini])中设置的width:184px优先级更高给覆盖了

在这里插入图片描述

当设置了size="mini"的属性时，还是被小程序自带默认样式button[size=mini]中设置的width:auto优先级更高给覆盖了
在这里插入图片描述

思路：修改我们自己样式的优先级，我看网上很多说是用行内样式style来修改，感觉从项目整体复用以及维护的角度不推荐，更好的是用优先级更高的选择器或者或者important覆盖，总之知道影响因素之后方案有很多

比如：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

总之知道影响因素之后方案有很多，并不局限于上面展示的几种方法，只要提升优先级就可以覆盖默认小程序设置的样式，对于为什么不建议用style而建议多用class，可以参考我另外一篇博文，其中有详细介绍：【CSS】为什么建议多用class而少用style?

相关阅读:
哪些企业可以做知识产权质押？
数据库导入文字不乱吗 CSV
利用IPV6随时访问家中影音Jellyfin
手写杨辉三角
美国Embarcadero公司正式发布2023 RAD Studio Delphi C++ Builder 12 Athens
超声波清洗机好用吗？哪家超声波清洗机好？不错超声波清洗机推荐
【附源码】计算机毕业设计JAVA教学成果管理平台录像演示
Spring Boot+Vue3前后端分离实战wiki知识库系统之分类管理功能开发
10.什么是递归插槽及使用方式
局域网组建教程

原文地址：https://blog.csdn.net/ann295258232/article/details/126163741