码迷,mamicode.com
首页 > 微信 > 详细

微信小程序覆盖自定义组件样式

时间:2018-08-01 15:58:29      阅读:2889      评论:0      收藏:0      [点我收藏+]

标签:badge   code   extern   bubuko   成功   指定   png   修改   strong   

小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式。

 

修改https://weapp.iviewui.com/所提供的组件样式为例,它定义了一个外部类接口:

技术分享图片

 
1. 通过第三方组件给出的externalClasses: [‘i-class‘],来指定自己的样式类

自己的wxml

i-class="myrate"

 <i-rate i-class="myrate" bind:change="onChange5" count="5" value="3" size="15"></i-rate>
<!-- i-class 通过外部类定义自己的类(像别名一样),来修改样式-->

技术分享图片

 
2. 修改自己的css文件

i-badge是第三方样式类,接下来使用自定义的类(第三方组价的别名)修改样式

.mytab i-badge {
  width: 189rpx;
}


技术分享图片


成功覆盖样式!

微信小程序覆盖自定义组件样式

标签:badge   code   extern   bubuko   成功   指定   png   修改   strong   

原文地址:https://www.cnblogs.com/xiaolinstudy/p/9401541.html

(3)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!