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

小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行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;
}

成功覆盖样式!

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

时间: 2024-09-30 14:41:59

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

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

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成.要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件):同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法

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

methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ctx = wx.createCanvasContext(el); ctx.setLineWidth(w);// 设置圆环的宽度 ctx.setStrokeStyle('#E5E5E5'); // 设置圆环的颜色 ctx.setLineCap('round') // 设置圆环端点的形状 ctx.begi

微信小程序_基础组件大全

微信小程序_基础组件 微信小程序为小程序开发者提供了一系列小程序基础组件,开发者可以通过组合这些小程序基础组件进行微信小程序的快速开发. 微信小程序组件是什么?微信小程序组件怎么用? 小程序组件是视图层的基本组成单元.小程序组件自带一些功能与微信风格的样式.一个小程序组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property="value"> Content goes here ... </tagename>

微信小程序导入Vant-Weapp组件库及出错处理

微信小程序导入Vant-Weapp组件库及出错处理一.下载Node.js*链接:https://nodejs.org/en/推荐选择LST的8.0以上版本,下载安装即可,安装完成后可以进行验证cmd打开终端,输入vant-v出现对应版本即为安装成功,也可输入npm -v查看对应的npm版本 二.在微信开发工具做对应操作 链接:https://youzan.github.io/vant-weapp/#/intro 后续可根据开发指南进行操作 三.安装Vant组件库选中miniprogram文件,右

微信小程序简易table组件实现

前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页面引用时,无需通过import,只需在该页面json文件下配置usingComponents属性即可.(原本想在app.json文件里配置这个属性,从此一劳永逸,但目前貌似还不支持,至少我尝试的时候还不行-.-) 思路:主要是将table的head和tbody部分的数据抽象出来,使之只需要传值就可直

微信小程序之video组件与cover-view组件和cover-image组件灵活应用

前言:最近忙着赶项目,没时间更博:希望和大家一起学习一起进步. 本人遇到的坑,以及爬出坑的方法:在某个微信小程序项目中,有这样一个需求:在滑块swiper组件和swiper-item组件中嵌套video,然后自定义一个播放的按钮替换默认的播放按钮和位置(我开始用的方法是用相对定位,把图片直接定位在视频的中央地方,问题就出现了,由于文档已经给了提示,最好不要在滑块swiper组件和swiper-item组件中嵌套video,所以,最后导致,第一个滑块可以正常看到播放按钮,其他的则不行,会随着滑块滑

微信小程序之自定义toast弹窗

微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加模板代码 <template name="toast"> //nam

微信小程序引入外部组件 iView Weapp

iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址:https://github.com/TalkingData/iview-weapp 2. 将组件库复制到工程的static目录下 下载完成后,到它的目录中寻找名为dist的目录并复制到你的工程目录下,然后给这个dist目录改个名字,比如叫iview. 3.  为需要使用自定义组件的Page进行配

微信小程序之自定义tabbar

0. 官方指南 # 由于微信小程序的异步机制,页面跳转会出现随机事件 # 目的: 解决认证跳转过程的不友好体验 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 1. app.json文件的处理 1. 添加:"custom": true,使用自定义的tabbar 2. 将非tabbar的内容删除,删除的示例是发布,如下: "tabBar": {