小程序修改自定義組件樣式

相信很多初次接觸小程序開發(fā)的盆友都遇到過這個問題，那就是引入自定義組件
時無法覆蓋其原有的樣式，本文將詳細(xì)介紹如何修改自定義組件樣式。

需求

原組件如圖1-1所示，在引用頁面中需要修改數(shù)字的顏色和單位的字號大小，
修改后的組件如圖1-2所示。

解決思路

在組件的js文件中將wxml中需要修改的標(biāo)簽class暴露出來，然后在引用組件時
對暴露出的class進行class覆蓋。

具體步驟
1.找到需要修改的標(biāo)簽

<view class='horizontal-list'>
    <view><text class='number'>{{leftNum}}</text><text class='unit'>{{leftUnit}}</text></view>
    <view class='des'>{{leftTitle}}</view>
</view>
通過對組件的觀察，我們需要覆蓋的標(biāo)簽的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;
}