当前位置: 首页 > >

Element导航菜单自定义样式

发布时间:

1.修改主菜单的背景色等,直接在标签上写所需背景色,比如:



background-color="rgba(70, 76, 91, 1)" text-color="#ccc">

管理1
配置1



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



友情链接: