el-plus dropdown menu-item hover 样式修改

问题：

el-plus 很多组件的样式都被规定好了，但是可能颜色跟我们设计的主题不符，所以需要修改，但是往往直接的css .class 操作覆盖不了el-plus的全局设置，非常头大。本文主要介绍一下Dropdown组件的menu-item在hover情况的样式修改

解决：

1. 为了不影响全局设置我们使用popper-class，在dropdown组件中添加popper-class attribute 

popper-class="dropDownStyle"

2. 在scoped style中

:global(.dropDownStyle .el-dropdown-menu__item) {
    width: 150px;
}

:global(.dropDownStyle .el-dropdown-menu__item:hover) {
    background-color: #EEEEEE !important;
    color: #303030 !important;
}

 发现鼠标悬停时样式改变了，但是鼠标移走之后又变回了原来的样式，F12分析之后发现

有一个这个属性在影响样式的改变，我们直接修改掉就好，完整css代码

:global(.dropDownStyle .el-dropdown-menu__item) {
    width: 150px;
}

:global(.dropDownStyle .el-dropdown-menu__item:hover) {
    background-color: #EEEEEE !important;
    color: #303030 !important;
}

:global(.dropDownStyle .el-dropdown-menu__item:not(.is-disabled):focus) {
    background-color: #EEEEEE !important;
    color: #303030 !important;
}