小程序页面嵌套自定义组件无法修改vant-weapp样式的问题

在小程序中,当自定义组件内嵌 vant 组件时,发现无法修改 vant 的样式。尝试使用 !important、/deep/、#shadow、custom-class 等方式无效。解决方法是在父页面的 wxss 文件中,通过添加父元素选择器来修改 vant 组件的样式,从而实现对自定义组件内 vant 侧边栏选中项边框颜色的更改。此方法可能会影响页面中所有使用 vant sidebar 的自定义组件。
摘要由CSDN通过智能技术生成

问题描述:

一般情况下,小程序想修改vant组件的样式只需要找到对应vant组件的类名,可以自由的在自己的wxss文件中进行修改。

但当我们在自定义组件内引入vant元素,再将自定义组件内嵌到小程序某个页面中的时候,此时,自定义组件内的vant元素的样式就无法修改了。

我试了各种方法,!important /deep/ #shadow custom-class...都无效。

比如,我现在自定义了ctrl-device组件,并在组件内使用了vant的侧边栏,此时,我想修改侧边栏选中项的边框,如图,官方默认边框为红色

 

我现在要修改它为绿色,此时,如果我在ctrl-device组件的wxss文件内选中vant标签去修改,是无法生效的。尽管我们通过wxml结构已经找到了该元素边框的class类以及他的嵌套位置。

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值