vant-UI组件的样式穿透----即vant-UI组件中的部分样式无法修改问题

       相信大家使用vant组件时,总有一些UI组件无法满足自己的样式,修改css样式的时候还是无效的。css一般都会使用sass或者less,当在style标签加了scoped后,想要修改的样式就不会起作用,即便加上"!important"都不会起作用

例如:当我们想要修改头部导航栏的样式

<template>
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar title="头部导航栏"></van-nav-bar>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
//头部导航栏背景
.van-nav-bar {
  background-color: blue;
}
//头部导航栏字体样式
.van-nav-bar__title {
  color: #fff;
}
</style>

此时,我们发现头部导航栏的背景修改成功了,但是字体样式无法修改成功,如图

当我们添加!important后,样式也不会发生变化,或者使用>>>或者使用/deep/样式都不会修改成功

当然,想要修改字体样式成功我们可以在想要修改的class前面添加上::v-deep进行样式穿透就可以修改成功了

<style lang="scss" scoped>
//头部导航栏背景
.van-nav-bar {
  background-color: blue;
}
//头部导航栏字体样式
::v-deep .van-nav-bar__title {
  color: #fff;
}
</style>

效果如图所示

此时,我们就修改成功了