微信小程序（原生） - 修改自定义组件样式

微信小程序（原生） - 修改自定义组件样式

修改自定义组件样式

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

image

需求场景：

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

​ 图1-1.jpg

​ 图1-2.jpg

解决思路：

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

具体步骤：

1.找到需要修改的标签

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

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

Component({
    externalClasses: ['number','unit'],
})

3.在引用页面引用该组件时对暴露出的class进行覆盖

<horizontalList number='newnumber' unit='newunit'></horizontalList>

4.在wxss文件中添加需要修改的样式

.newnumber {
  font-size: 52rpx;
  font-weight: bold;
  color: red;
  line-height: 52rpx;
}
.newunit {
  font-size: 40rpx;
}

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

本文是转载记录：大家可以查看作者：https://www.jianshu.com/p/8c35af7a7f6a，笔记类转载。