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

问题描述：

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

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

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

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

 

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

 

 不管我们如何增加权重，如何精准的选中元素，都是无法修改样式的， 原因在于，嵌套在页面中的自定义组件当中的vant标签是无法被选中的。

解决：

组件内无法修改，我们就去它的父页面修改。

此处要注意，如果直接在自定义组件所属的页面wxss文件直接对vant自带的class类名进行修改的话也是无效的，需要加上页面的父元素

 这时，sidebar的border颜色就修改成功啦！！！

 注意！如果该页面包含多个自定义组件，且多个自定义组件都使用了vant的sidebar侧边栏组件，则该方法会修改所有自定义组件的sidebar样式！