微信小程序如何在父组件中修改子组件的样式

在微信小程序中,父组件通常无法直接修改子组件的样式,但可以通过指定外部类来间接实现。本文介绍了一种利用`externalClasses`属性和`!important`规则重写子组件样式的技巧,详细阐述了如何在父页面中通过设置`parentClass`来改变子组件`w-more-img`的背景颜色,强调了在实践中注意class命名规范和样式覆盖的重要性。
摘要由CSDN通过智能技术生成

一般情况下,父组件不能改变子组件的样式,所以需要动点心思来实现。

// 组件 js
Component({
  externalClasses: ['parent-class']
});
// 组件 wxml
<view class="parent-class"></view>

// 父页面 wxml
<w-more-img parent-class="parentClass"/>

// ***** class名不能使用驼峰,否则不生效 *****

如果要重写子组件中的属性,需要用到!important

.parentClass{
  background: red!important;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码搬运媛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值