小程序修改自定义组件样式
相信很多初次接触小程序开发的盆友都遇到过这个问题,那就是引入自定义组件
时无法覆盖其原有的样式,本文将详细介绍如何修改自定义组件样式。
需求
原组件如图1-1所示,在引用页面中需要修改数字的颜色和单位的字号大小,
修改后的组件如图1-2所示。
![](http://upload-images.jianshu.io/upload_images/17648013-d874eb597a7063d2.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/296/format/webp)
图1-1.jpg
![](http://upload-images.jianshu.io/upload_images/17648013-43e70fb9d20e9455.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/304/format/webp)
图1-2.jpg
解决思路
在组件的js文件中将wxml中需要修改的标签class暴露出来,然后在引用组件时
对暴露出的class进行class覆盖。
具体步骤
1.找到需要修改的标签
<view class='horizontal-list'>
<view><text class='number'>{{leftNum}}</text><text class='unit'>{{leftUnit}}</text></view>
<view class='des'>{{leftTitle}}</view>
</view>
通过对组件的观察,我们需要覆盖的标签的class分别为 number,unit
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;
}
暴露出来重新写样式,组件内的样式将不会再使用全部用外部样式https://www.jianshu.com/p/8c35af7a7f6a