修改自定義組件樣式

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

需求場景：

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

圖1-1.jpg

圖1-2.jpg

解決思路：

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

具體步驟：

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

<!-- 通過對組件的觀察，我們需要覆蓋的標(biāo)簽的class分別為 number，unit --> <view> ? ? <view><text>{{leftNum}}</text><text>{{leftUnit}}</text></view> ? ? <view>{{leftTitle}}</view> </view>

2.在組件的js文件中將這兩個class暴露

*** 在使用組件的頁面中定義樣式（自定義樣式與組件內(nèi)部樣式優(yōu)先級不確定，為了確保自定義樣式生效，使用了!important）***

了解更多，請點擊：https://www.bilibili.com/video/BV1e5411n73j

作者：說過的玩笑
鏈接：https://juejin.cn/post/6913795163605172231
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。