【vant 组件样式 修改】

vant 组件样式 修改

在使用 vant 组件时，总有些组件不能满足我们的需求。我们希望更改组件内部的样式，来达到我们所期望的那样。

解决方式：

方式一 ：可以在app的样式中加入

// 你可以去浏览器找到你要更改组件的 类名
// 建议你加上  !important 关键字，以免权重不够 修改样式不起效
.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>
.van-dropdown-menu__bar {
  background: #6609f2 !important;
  box-shadow: none !important;
}
.van-dropdown-menu__title,
.van-dropdown-menu__title--active {
  color: #fff !important;
}
</style>

这时有个问题：子组件在相同的页面展示多个，这多个还希望是不同的样式。那就可以外层多套一个 div ，给一个 类名，然后 使用 子代选择器 即可。

方式三 ： 在单独页面中设置，子代选择器

// btn 是 外层div 的 类名。
<style>
.btn > .van-dropdown-menu__bar {
  background: #fff !important;
}
.btn .van-dropdown-menu__title {
  color: #333 !important;
}
</style>