问题:
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;
}