1.修改主菜单的背景色等,直接在<el-menu>标签上写所需背景色,比如:
<el-aside width="205px" >
<el-menu v-on:select="handleSelect" :default-active="$route.path" router
background-color="rgba(70, 76, 91, 1)" text-color="#ccc">
<el-submenu index="1">
<el-menu-item index="/account">管理1</el-menu-item>
<el-menu-item index="/bhConfigure">配置1</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
2.修改子菜单的背景色:
.el-menu-item {
background-color: #333 !important;
}
字体颜色:
.el-aside {
color: #333;
}
3.鼠标悬浮时,子菜单的样式:
.el-menu-item:hover{
outline: 0 !important;
color: #409EFF !important;
}
.el-menu-item.is-active {
color: #fff !important;
background: #409EFF !important;
}
4.鼠标悬浮时,主菜单的样式:
.el-submenu__title:focus, .el-submenu__title:hover{
outline: 0 !important;
color: #409EFF !important;
background: none !important;
}
ps:
需要修改第三方组件的CSS,这些都是 scoped
样式,移除 scope
或打开一个新的样式是不可能的。
使用深层选择器 >>>
/deep/
::v-deep
可以帮助你。
例如:
>>> .el-menu-item:hover{
outline: 0 !important;
color: #409EFF !important;
}
/deep/ .el-menu-item:hover{
outline: 0 !important;
color: #409EFF !important;
}
::v-deep .el-menu-item:hover{
outline: 0 !important;
color: #409EFF !important;
}