微信小程序 修改三方组件中的自带样式

已于 2022-12-21 10:22:54 修改
阅读量2.5k 收藏 4
点赞数 1
分类专栏： 小程序 文章标签： 微信小程序 小程序
于 2022-12-09 11:09:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44266024/article/details/128249450
版权

众所周知，微信小程序会引用诸如vant，weiui等三方组件，当我们想要对组件自带样式进行修改的时候该怎么做呢？

1.在调试器中找到想要修改样式的组件的class类名，在对应的wxss中添加样式，此时样式未生效；

2.官方文档中提到可以在externalclass中添加一个类名暴露给父组件，让其对该类进行重写；

3.因为此次更改的样式较少，同时为了节约时间，本人尝试是否可以添加!important强制覆盖，尝试后发现成功了，看来微信小程序也是可以使用!important的呀~

成长，就是学会在跌跌撞撞中把所有委屈调成静音模式，该得到的付出努力就会抓到手！

Just � Lionet
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序---修改自定义组件样式
weixin_45561258的博客
07-16 1520
思路 在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时 对暴露出的class进行class覆盖。 1、在组件中找到需要修改的样式类 <view class="item"> <view class="left myleft">左边</view> <view class="right myleft" >右边</view> </view> // 需求： 覆盖.item_left、item_left的背景
微信小程序浮动按钮组件
06-26
改版成微信小程序组件的过程可能涉及以下步骤： 1. **组件结构改造**：由于微信小程序有自己的组件模型，需要将uni-fab的结构转换为符合微信小程序规范的wxml和wxss文件。wxml负责结构，wxss负责样式。 2. **事件...
微信小程序怎么修改自定义组件中的样式
weixin_36557877的博客
03-10 2756
在微信小程序中我们经常要用到自定义组件，但是有时我们因为引用的地方不同可能组件的一些样式也要修改，比如颜色，高度，宽度等来适合不同的页面，有没有办法来修改自定义组件中的样式呢，很显然是有的，我们要用到externalClasses方法。在父组件的标签上写入子组件externalClasses配置项传入的值作为css的class类名称。
微信小程序组件 默认样式修改
最新发布
2301_82243539的博客
05-09 369
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
微信小程序组件样式修改
qinnzheng
08-14 3609
微信小程序组件样式（CSS）修改 1.checkbox样式修改 /checkbox整体大小/ checkbox { width: 240rpx; height: 90rpx; } /checkbox选项框大小/ checkbox . wx-checkbox-input { width: 50rpx; height: 50rpx; border-radius: 50%; //选项框变成O } /checkbox选中后样式/ checkbox . wx-checkbox-input. wx
【微信小程序】基础篇 -- 自定义组件 -- 创建与引用 &样式（三十二）
JMFive的博客
03-10 4672
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第32篇文章;今天开始学习微信小程序的第17天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序修改原生组件样式（uni-app)
qiansitong的博客
07-06 1699
修改微信小程序原生组件样式；修改swiper指示点样式，需要包裹在swiper的样式选择器下才生效
微信小程序引入Vant Weapp修改样式不起作用,使用外部样式类进行覆盖
m0_74444744的博客
12-08 2607
微信小程序引入Vant Weapp后修改的css样式不起作用,没有效果,效果不符合预期,使用外部样式类进行覆盖
微信小程序 用户反馈组件 (源码)
05-31
微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈...
微信小程序 select 下拉框组件功能
10-16
主要介绍了微信小程序 select 下拉框组件功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序-组件练习
03-15
在这个“微信小程序-组件练习”中，我们可以深入学习和实践微信小程序的各种组件功能。 首先，微信小程序的组件是其核心特性之一，它们是预先定义好的UI元素，开发者可以通过简单的配置和组合来构建应用程序的界面...
微信小程序仪表盘组件
01-27
微信小程序仪表盘组件基于canvas开发，功能不断叠加如何使用第一步：在需要使用该组件地方的配置文件中加入{ "usingComponents":{ "gauge":"../../components/gauge" // 组件地址 }}或者使用官方的npm支持文档中方案...
微信小程序父组件改子组件的样式
Allen_cats的博客
02-05 659
微信小程序父组件改子组件的样式
小程序中修改自定义组件的样式的几种方式
m0_49016709的博客
05-26 1427
自定义组件中的代码 wxml中： <view class="headerBox"> <text class="header-item">IN-SHOOT</text> <navigator class="header-item" url="../../pages/index/index">首页</navigator> <navigator class="header-item" url="../../pages/discover/
WX小程序-VantWeapp组件库样式修改
weixin_49352307的博客
04-08 587
根据官方文档查找组件样式类，对其样式进行修改。比如使用按钮组件在app.scss中修改样式。
微信小程序 - 自定义组件支持外部class或style样式及参数 (Component - externalClasses)
卡尔特斯
10-23 4662
在小程序开发的时候，我们有时候需要自定义或者封装一个小组件用到多处导入使用，怎么样才能使用外部设置进来的。既可以导出当前组件需要外部设置的。
微信小程序VantWeapp修改Siderbar样式
Araindyh的博客
03-11 1134
【代码】微信小程序VantWeapp修改Siderbar样式。
《十七》微信小程序中的插件
热门推荐
花铛
12-30 1万+
插件是对一组 js 接口、自定义组件或页面的封装，用于嵌入到小程序中使用。插件不能独立运行，必须嵌入在其他小程序中才能被用户使用；而第三方小程序在使用插件时，也无法看到插件的代码。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。相对于普通 js 文件或自定义组件，插件拥有更强的独立性，拥有独立的 API 接口、域名列表等，但同时会受到一些限制，如 一些 API 无法调用或功能受限。还有个别特殊的接口，虽然插件不能直接调用，但可以使用插件功能页来间接实现。
微信小程序修改 vant Weapp自带样式
12-28 4942
拿侧边栏做例子 ：想要修改选中时的红色选中样式 找到控制css样式的class名 修改：class名前面加view
微信小程序修改自定义组件样式
10-27
微信小程序中修改自定义组件样式有两种方法：一种是通过在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时对暴露出来的class进行class覆盖；另一种是通过设置组件的styleIsolation属性来控制样式隔离。其中，第一种方法可以实现样式的局部修改，而第二种方法可以实现样式的全局修改。 具体实现方法如下： 1. 局部修改样式： 在组件的js文件中将需要修改的标签class暴露出来，例如： ``` Component({ externalClasses: ['my-class'] }) ``` 在组件的wxml文件中找到需要修改的标签，例如： ``` <view class="my-class">我是组件内部标签</view> ``` 在引用组件的页面中使用组件，并对暴露出来的class进行class覆盖，例如： ``` <my-component class="text"></my-component> ``` 在引用组件的wxss文件中修改样式，例如： ``` .text { color: red; } ``` 2. 全局修改样式： 在组件的js文件中设置options属性，例如： ``` Component({ options: { addGlobalClass: true } }) ``` 在引用组件的页面中使用组件，例如： ``` <my-component></my-component> ``` 在引用组件的wxss文件中修改样式，例如： ``` .my-class { color: red; } ``` 其中，addGlobalClass属性等价于设置styleIsolation属性为apply-shared，但是如果设置了styleIsolation属性，则addGlobalClass属性会失效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值