如何修改vant组件库中下拉菜单的背景色

一、前言

vant 组件库在前端 APP 开发中可以说出现的频率是非常高的，但是刚开始接触时总会遇到一些难以解决的问题，尤其是下拉菜单的（van-dropdown-menu）背景色，这篇博客将为你彻底高效的解决这个问题。

---

二、使用过程及问题描述

1、下拉菜单的使用

<van-dropdown-menu>
    <van-dropdown-item title="我的经验方法" v-model="value1" :options="option1" />
</van-dropdown-menu>

2、 修改下拉菜单样式

浏览器端获取 class 类名和样式

.van-dropdown-menu__bar {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 48px;
    background-color: #fff;
    /* box-shadow: 0 2px 12px rgb(100 101 102 / 12%); */
}

可以看到下拉菜单的原始背景色是白色的，现在修改其背景色为橘黄色

<style lang="less" scoped>
 .van-dropdown-menu__bar {
	background-color: #eb8f00 !important;
}
<style>

这是就会发现修改的背景色并没有效果，还是白色，尝试将其进行深度渲染看看

<style lang="less" scoped>
 /deep/.van-dropdown-menu__bar {
	background-color: #eb8f00 !important;
}

//或者

 ::deep.van-dropdown-menu__bar {
	background-color: #eb8f00 !important;
}
<style>

使用深度渲染后发现还是没有效果，是不是快崩溃了，要不要再为其添加父元素 class 类名指向提高可读性看看，别想了，深度渲染都没用呢，往下看吧！！！！

三、解决问题的方法

1、去除 style 中的 scoped

<style lang="less">
 .van-dropdown-menu__bar {
	background-color: #eb8f00 !important;
}
<style>

2.为其父元素添加一个类名，再指向它，不然会造成全局样式污染，其他使用过下拉菜单组件的背景色也会跟着变

<van-dropdown-menu calss="my_dropdown_menu">
    <van-dropdown-item title="我的经验方法" v-model="value1" :options="option1" />
</van-dropdown-menu>

.my_dropdown_menu > .van-dropdown-menu__bar {
	background-color: #eb8f00 !important;
}