微信小程序父组件改子组件的样式

最新推荐文章于 2025-06-04 12:34:07 发布
原创 最新推荐文章于 2025-06-04 12:34:07 发布 · 1.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序

本文详细解释了如何在微信小程序中实现组件的样式隔离，通过在js文件中设置`styleIsolation`为`apply-shared`，并在使用组件的文件中修改wxss并添加`!important`，介绍了相关配置和官方文档链接。

博客上没找到简单明了的写法，这部分在文档里写的还比较清楚我来举例更加详细的说明

目的：这样的

改为

这样的：

第一步：

组件的js文件中添加这个代码

Component({
  options:{
    "styleIsolation": "apply-shared"
  }
})

 第二步：在使用组件的文件的wxss文件中更改样式，并额外的加入！important

官方文档在这里

自定义组件 / 组件模板和样式 (qq.com)icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

Allen_cats
关注
微信小程序——外部样式类-父组件修改子组件样式
我是我
05-26 3323
在开发的过程中，我定义了一个公共组件，但在我的设计稿上面，这个公共组件距离内容的margin-bottom是不同的，所以我需要在父组件引用这个组件的时候，在父组件的css中设置他的样式，查阅小程序文档，找到了外部样式，使用方式如下： 子组件定义被外部使用类 子组件wxml：wxml中定义将要被外部使用的class名称 my-class <view class="activityPrivilege my-class"> <image class="activityPrivilege-
微信小程序修改原生组件样式（uni-app)
qiansitong的博客
07-06 2243
修改微信小程序原生组件样式；修改swiper指示点样式，需要包裹在swiper的样式选择器下才生效
《十》微信小程序中自定义组件的组件模板、组件样式和 JSON 配置
花铛
03-03 8134
这段文本的颜色局部引用了组件所在页面的样式
【微信小程序】 - 在父组件中修改子组件的样式
weixin_41815063的博客
09-27 604
适用场景：当子组件在不同地方被调用，不同页面对子组件的样式要求不同时使用。
微信小程序：在父组件中修改子组件的样式
weixin_42645716的博客
06-30 2379
微信小程序：在父组件中修改子组件的样式
微信小程序 父组件样式修改子组件样式
weixin_45972345的博客
03-01 721
微信小程序 父组件样式修改子组件样式 //在components中使用 options: { styleIsolation: 'apply-shared' }, 链接: 官方文档
微信小程序的父子组件通信
最新发布
胡西风的博客
06-04 1076
本文详细介绍了微信小程序中父组件修改子组件属性的实现方式。主要内容包括：1) 核心机制是通过属性绑定和数据响应实现父子通信，包括父组件数据绑定、子组件属性声明和父组件更新数据；2) 高级用法介绍了通过selectComponent获取子组件实例直接操作的方法；3) 提供了完整的代码示例展示父子组件交互流程；4) 强调了单向数据流原则和推荐通信模式。文章建议优先使用属性绑定和事件机制，谨慎使用直接操作子组件的方式，以保持组件的封装性和可维护性。
精选资源
微信小程序树形组件微信小程序树形组件
06-21
微信小程序提供了丰富的CSS样式支持，可以使用`wxss`来定制组件的外观。 6. **性能优化**： 对于大规模的树形数据，一次性渲染所有节点可能导致性能问题。我们可以采用虚拟DOM技术，只渲染可视区域内的节点，或者...
微信小程序父组件向子组件传参,子组件样式无效问题处理
一个超爱喝可乐的web前端攻城狮
09-08 961
【代码】微信小程序父组件向子组件传参,子组件样式无效问题处理。
微信小程序引导组件【添加到我的小程序】
03-30
本项目是关于利用uni-app框架实现微信小程序中的一个特定引导组件——“添加到我的小程序”。 uni-app是一个多端开发框架，它允许开发者用一套代码就能编写出适应于微信小程序、H5、App等多个平台的应用。这个组件...
微信小程序如何在父组件中修改子组件的样式
sinat_33255495的博客
04-07 2772
一般情况下，父组件不能改变子组件的样式，所以需要动点心思来实现。 // 组件 js Component({ externalClasses: ['parent-class'] }); // 组件 wxml <view class="parent-class"></view> // 父页面 wxml <w-more-img parent-class="parentClass"/> // ***** class名不能使用驼峰，否则不生效 ***** 如果要重写子组件
在父组件修改子组件样式
ffl886的博客
11-16 614
在父组件修改子组件样式
在Vue父组件中修改子组件的样式
m0_50953782的博客
12-10 1439
若两个不同的页面使用了同一个组件，且不同页面对使用组件的样式需求不同时，可在父组件中修改子组件的样式。1.若想在父组件1修改子组件的样式，而不影响其他组件，可结合scoped与deep深度选择器使用。2.在父组件添加类名。
uniapp通过父组件改变子组件样式
aksaber的博客
10-29 3078
这里写自定义目录标题uniapp通过父组件修改子组件样式项目场景：问题描述：原因分析：解决方案：需求：功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 uniapp通过父组件修改子组件样式 分享一个在uniapp下h5端和小程序端的
吹爆这份HTTP顶级教程，从入门到核心实战，技术总监都拍手叫好
2401_84152092的博客
05-08 973
认识 SSL/TLSHTTPS 的内核是 HTTP自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
VSCode 开发Vue必备插件
2301_78416672的博客
05-06 1067
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
父组件给子组件传CSS样式
weixin_43837268的博客
07-09 4069
1.子组件bigButton.vue <template> <button :style="styleObject"> <slot></slot> </button> </template> <script> export default { name: 'Button...
微信小程序-自定义组件修改样式
qq_36576931的博客
06-05 5236
项目中一个组件用在不同的界面，但A界面的样式和B界面的样式不一样，也就用到了下面的方法（以下是转自一位大牛的，主要是以后方便查阅，感谢大牛。）。 1、小程序的 外部样式属性：externalClasses 可以是 1个或多个 （string or array） 2 在组件标签里写上class 3、在使用组件的页面里的标签里 写上属性要对应的class类名 4、在使用组件...
微信小程序-自定义组件样式
weixin_42284031的博客
07-02 898
</view>
微信小程序父组件修改子组件的值
08-12
回答: 要在微信小程序的父组件中修改子组件的值，可以通过以下几个步骤进行操作。首先，需要在子组件的WXML中添加一个text标签，并给它设置一个class属性，比如"class=color"。 然后，在子组件的JS文件中，使用externalClasses属性将color类引入到组件中，即Component({ externalClasses: ['color'] })。 接下来，在父组件的JSON文件中，引用子组件并将其路径指定为组件的别名，例如{ "usingComponents": { "foot": "/components/foot/foot" } }。 然后，在父组件的WXML中使用foot标签来调用子组件，并设置color属性为想要修改的颜色值，例如<foot color="newcolors"></foot>。 最后，在父组件的CSS文件中，定义一个新的CSS类.newcolors，将其颜色设置为想要修改的颜色，例如.newcolors{color: red !important;}。 在onReady生命周期函数中，将获取到的组件对象赋值给一个变量，比如this.canvas。然后就可以通过this.canvas.$vm.clearCanvas()来调用子组件的clearCanvas方法。 注意，有些情况下不需要加$vm，可以直接使用this.canvas.clearCanvas()来调用方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [微信小程序：在父组件中修改子组件的样式](https://blog.youkuaiyun.com/weixin_42645716/article/details/125540410)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [微信小程序父组件调用子组件的方法](https://blog.youkuaiyun.com/qq_34716929/article/details/128622997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值