Element导航菜单自定义样式_el-menu 样式

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;
}