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

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

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

自己的wxml

i-class="myrate"

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

2. 修改自己的css文件

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

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

成功覆盖样式!

微信小程序覆盖自定义组件样式的更多相关文章

  1. 微信小程序之自定义组件的应用

    小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...

  2. 微信小程序之自定义组件

    在微信小程序项目中 肯定会存在很多功能和样式上相似的部分 面对这种情况 只是单单的ctrl+c ctrl+v 就显得很low了,而且也不便于后期维护那么这时候 使用微信小程序中的自定义组件功能就很合适 ...

  3. 微信小程序:自定义组件

    为什么要学习自定义组件? 1.用上我自己的单词abc,我希望在页面中展示椭圆形的图片, 2.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二 ...

  4. 微信小程序开发---自定义组件

    开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面, ...

  5. 微信小程序:自定义组件的数据传递

    一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件 ...

  6. 微信小程序之自定义组件与使用

    一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用. 组件导出的关键字是 exprot default 没有加default时,例如: export class Template ...

  7. 微信小程序里自定义组件,canvas组件没有效果

    methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ct ...

  8. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  9. 微信小程序中的组件

    前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官 ...

随机推荐

  1. Vue 表格里的下拉列表

    下拉列表column-select.vue组件内容: <template> <div class="column-select-wrapper"> < ...

  2. python 编码规范 (http://www.runoob.com/w3cnote/google-python-styleguide.html)

    命名约定 所谓"内部(Internal)"表示仅模块内可用, 或者, 在类内是保护或私有的. 用单下划线(_)开头表示模块变量或函数是protected的(使用import * f ...

  3. C++使用指针的优点

    使用指针可以带来如下的好处: (1)可以提高程序的编译效率和执行速度,使程序更加简洁. (2)通过指针被调用函数可以向调用函数处返回除正常的返回值之外的其他数据,从而实现两者间的双向通信. (3)利用 ...

  4. asp.net core结合docker实现自动化获取源码、部署、更新

    之前入坑dotnet core,由于一开始就遇到在windows上编译发布的web无法直接放到centos上执行.之后便直接研究docker,实现在容器中编译发布.然后就越玩越大,后来利用git的ho ...

  5. 为什么移动构造要使用noexcept

    vector::push_back操作,保证了如果过程中出现异常,vector不会发生变化. push_back过程中,可能会因为已有内存空间不够,申请新的内存,同时把原内存中已有的元素,放到新申请的 ...

  6. 基于C/S 结构的IM即时通讯软件--下篇

    3.实现界面事件函数 客户端:单击" 进入" 按钮发送请求,如果要与服务器通信,必须要同时发送结构体信息描述发送内容,便于服务器处理. void CCase010Dlg::OnBn ...

  7. Redis 4.0.2.3 for Windows (alpha) 下载地址

    下载地址如下: https://github.com/tporadowski/redis/releases 如果直接使用redis-server.exe启动报错的话,就使用redis-server.e ...

  8. OSVOS 半监督视频分割入门论文(中文翻译)

    摘要: 本文解决了半监督视频目标分割的问题.给定第一帧的mask,将目标从视频背景中分离出来.本文提出OSVOS,基于FCN框架的,可以连续依次地将在IMAGENET上学到的信息转移到通用语义信息,实 ...

  9. linux 下oracle导入dmp文件

    2017年08月01日 19:10:49 xuxie13 阅读数:17788   最近要到某公司进行poc演示,整了个新项目,需要我数据库修改项目,这才有了这篇博客. 首先进入linux下oracle ...

  10. (项目六)Mha-Atlas-MySQL高可用方案实践

    mha-mysql环境准备: 三台虚拟机,都安装了mysql,都关闭防火墙和selinux,同时在每台虚拟机上都做映射 软件包 1) mha管理节点安装包: mha4mysql-manager-0.5 ...