Element导航菜单⾃定义样式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; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。