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

最新推荐文章于 2024-04-03 23:44:00 发布
最新推荐文章于 2024-04-03 23:44:00 发布
阅读量457 收藏 4
点赞数 10
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Allen_cats/article/details/136039594
版权

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

目的：这样的

改为

这样的：

第一步：

组件的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
关注
  • 10
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序：在父组件中修改子组件的样式
weixin_42645716的博客
06-30 1986
微信小程序：在父组件中修改子组件的样式
微信小程序气泡组件
01-27
微信小程序自定义气泡组件由于手机屏幕就那么点大，如果一堆按钮全部并排显示显示或挤在一起会显得比较的臃肿，为解决这个问题。所以编写了这个气泡组件。能根据元素内容的宽高自动计算气泡的定位气泡的内容项可以...
微信小程序怎么修改自定义组件中的样式
weixin_36557877的博客
03-10 2669
在微信小程序中我们经常要用到自定义组件，但是有时我们因为引用的地方不同可能组件的一些样式也要修改，比如颜色，高度，宽度等来适合不同的页面，有没有办法来修改自定义组件中的样式呢，很显然是有的，我们要用到externalClasses方法。在父组件的标签上写入子组件externalClasses配置项传入的值作为css的class类名称。
微信小程序UI组件vant-weapp样式修改
最新发布
to_prototy的博客
04-03 573
微信小程序 vant-weapp组件库样式修改或覆盖
在父组件修改子组件样式
ffl886的博客
11-16 498
在父组件修改子组件样式
微信小程序修改原生组件样式（uni-app)
qiansitong的博客
07-06 1477
修改微信小程序原生组件样式；修改swiper指示点样式，需要包裹在swiper的样式选择器下才生效
《十》微信小程序中自定义组件的组件模板、组件样式和 JSON 配置
花铛
03-03 7648
这段文本的颜色局部引用了组件所在页面的样式
微信小程序 select 下拉框组件功能
10-16
主要介绍了微信小程序 select 下拉框组件功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序-组件练习
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序button组件使用详解
01-03
本文为大家分享了微信小程序button组件的使用方法，供大家参考，具体内容如下 展示效果图 button组件的常用属性 size：default、mini—-default为块级按钮、mini为小按钮 type：primary、default、warn—-primary...
微信小程序 树形菜单组件_v2
07-20
微信小程序 树形菜单组件 v2 需属性传值 listData（树形菜单数据） listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <wxTreeList listData="{{listData}}"></...
微信小程序自定义组件样式
crazyXB的博客
06-06 364
表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了。表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。1. 组件和引用组件的页面不能使用id选择器（文件的样式，只对组件wxml内的节点生效。2. 组件和引用组件的页面中使用后代选择器（
小程序自定义组件—组件样式
2301_76854810的博客
06-14 726
掌握组件样式的编写注意点及组件样式隔离解决方案。
微信小程序 修改三方组件中的自带样式
weixin_44266024的博客
12-09 2471
众所周知，微信小程序会引用诸如vant，weiui等三方组件，当我们想要对组件自带样式进行修改的时候该怎么做呢？
scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题
kirinlau的专栏
10-30 1944
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。使用中发现了一个问题，就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时，会影响到子组件中的样式，样式穿透的方式有：>>>、 /deep/、::v-deep这三种。使用>>>修改无效，原因是scss等预处理器却无法解析>>>第三种，使用::v-deep，
微信小程序组件样式修改
qinnzheng
08-14 3466
微信小程序组件样式（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
微信小程序 父组件样式修改子组件样式
weixin_45972345的博客
03-01 612
微信小程序 父组件样式修改子组件样式 //在components中使用 options: { styleIsolation: 'apply-shared' }, 链接: 官方文档
微信小程序——外部样式类-父组件修改子组件样式
我是我
05-26 2748
在开发的过程中，我定义了一个公共组件，但在我的设计稿上面，这个公共组件距离内容的margin-bottom是不同的，所以我需要在父组件引用这个组件的时候，在父组件的css中设置他的样式，查阅小程序文档，找到了外部样式，使用方式如下： 子组件定义被外部使用类 子组件wxml：wxml中定义将要被外部使用的class名称 my-class <view class="activityPrivilege my-class"> <image class="activityPrivilege-
微信小程序父组件修改子组件的值
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.csdn.net/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.csdn.net/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
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值