vant组件的样式修改

主要还是在VUE中使用vant组件，一些样式的修改。
例如：

这样的一个组件，我们修改他的样式，这里是我修改过后的样式，原来是白色的。
可以在app的样式中加入：

.van-dropdown-menu__bar {
     
   background: #6609f2 !important;
   box-shadow: none !important;
 }

.van-dropdown-menu__title,
.van-dropdown-menu__title--active {
     
   color: #fff !important;
 }

这里类名如何得知呢？通过网页审查元素得到。
但这样修改会产生一个问题，就是这个样式成为全局的了。
别的页面使用，也会是这样一个样式。
这个时候，可以在单独页面中设置，但要注意的是把spcoed去掉，不然不生效。

<style lang='less'>
.van-dropdown-menu__bar {
     
  background: #6609f2 !important;
  box-shadow: none !important;
}

.van-dropdown-menu__title,
.van-dropdown-menu__title--active {
     
  color: #fff !important;
}
</style>

效果如图：


但后来又发现又有新的问题，子组件在相同的页面，修改掉，但不能同时展现两个。
后面灵机一动，又想到了一个新的方法：
html结构：

        <van-dropdown-menu class="btn">
          <van-dropdown-item v-model="valueCity" :options="optionCity" @change="changeCity" />
          <van-dropdown-item v-model="valuePrice" :options="optionPrice" @change="changeDropdown" />
          <van-dropdown-item v-model="valueYear" :options="optionYear" @change="changeYear" />
        </van-dropdown-menu>

加了一个btn 的类名：提高权限，限制样式条件
css：

<style lang="less" >
.btn > .van-dropdown-menu__bar {
     
  background: #fff !important;
}
.btn .van-dropdown-menu__title {
     
  color: #333 !important;
}
</style>

有更好的方法请留言