小程序修改自定義組件樣式
相信很多初次接觸小程序開發的盆友都遇到過這個問題，那就是引入自定義組件
時無法覆蓋其原有的樣式，本文將詳細介紹如何修改自定義組件樣式。
需求
原組件如圖1-1所示，在引用頁面中需要修改數字的顏色和單位的字號大小，
修改后的組件如圖1-2所示。
圖1-1.jpg
圖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