element ui 使用DropDown下拉菜单的时候，为了和当前项目的主题色相匹配，需要修改样式颜色。记录一下实现的过程和样式代码。

实例地址

vue 数据大屏 监控分析系统

html

使用时需要先给el-dropdown-menu定义一个样式 比如dropdownPop

<el-dropdown trigger="click">
<div class="dayTime cur">
  <span>近七天</span>
  <img src="../../../assets/home/icon_down.png" alt="">
</div>
<el-dropdown-menu class="dropdownPop" slot="dropdown">
  <el-dropdown-item>今天</el-dropdown-item>
  <el-dropdown-item>近三天</el-dropdown-item>
  <el-dropdown-item>近七天</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

css样式

再给dropdownPop添加自定义样式

//element ui下拉弹窗 dropdownPop自定义
.dropdownPop {
  background-color: #00429d;
  border: 1px solid #4472cb;

  .el-dropdown-menu__item {
    color: #47c4ff;
  }
  .el-dropdown-menu__item:hover{
    background-color: #4472cb;
  }
  .popper__arrow{
    border: 1px solid #4472cb !important;
  }
  .popper__arrow::after {
    border-top-color: #46bcff !important;
    border-bottom-color: #46bcff !important;
  }
}