vue3数据可视化大屏项目开发中，会遇到一些下拉菜单，在功能上element-plus已经满足了我们的需求，不过样式可能和我们的ui设计图不一致，这时候就需要自定义下样式了，vue3 element-plus dropdown下拉菜单自定义样式 可以通过修改el-dropdown-menu样式修改为我们需要的样式效果。

版本号

测试版本

"element-plus": "2.2.28",

修改后的效果

css样式

//下拉菜单
.el-scrollbar {
  background-color: #00429d;
  border: 1px solid #4472cb;

  .el-dropdown-menu {
    background: #05162f;
  }

  .el-dropdown-menu__item {
    color: #47c4ff;
    background: #05162f;
  }

  .el-dropdown-menu__item:hover {
    background-color: #05162f;
  }

  //鼠标移入的背景色
  .el-dropdown-menu__item:not(.is-disabled):focus {
    background-color: #4472cb !important;
    color: #b2dde9 !important;
  }

  .popper__arrow {
    border: 1px solid #4472cb !important;
  }

  .popper__arrow::after {
    border-top-color: #46bcff !important;
    border-bottom-color: #46bcff !important;
  }
}