修改自定义组件样式

 相信很多初次接触小程序开发的盆友都遇到过这个问题，那就是引入自定义组件时无法覆盖其原有的样式，本文将详细介绍如何修改自定义组件样式。

需求场景：

原组件如图1-1所示，在引用页面中需要修改数字的颜色和单位的字号大小， 修改后的组件如图1-2所示。 

图1-1.jpg

图1-2.jpg

解决思路：

在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时对暴露出的class进行class覆盖。 

具体步骤：

1.找到需要修改的标签

<!-- 通过对组件的观察，我们需要覆盖的标签的class分别为 number，unit --> <view>     <view><text>{{leftNum}}</text><text>{{leftUnit}}</text></view>     <view>{{leftTitle}}</view> </view>

2.在组件的js文件中将这两个class暴露

*** 在使用组件的页面中定义样式（自定义样式与组件内部样式优先级不确定，为了确保自定义样式生效，使用了!important）***

了解更多，请点击：https://www.bilibili.com/video/BV1e5411n73j

作者：说过的玩笑
链接：https://juejin.cn/post/6913795163605172231
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。