el-menu弹出菜单样式不生效
1. 使用 ruoyi 项目时出现的问题。
<template><el-menu:default-active="activeMenu":collapse="false":unique-opened="true"class="container":collapse-transition="true"mode="horizontal"><sidebar-itemv-for="(route, index) in sidebarRouters":key="route.path + index":item="route":base-path="route.path"/></el-menu></template>
class=“container” 中的样式是这样的
.container {box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);float: left;height: 100%;width: 200px;background-color: transparent !important;overflow: hidden;-webkit-transition: width .28s;transition: width 0.28s;-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);box-shadow: 2px 0 6px rgba(0,21,41,.35);.svg-icon {margin-right: 10px;margin-left: 3px;}// menu hover.el-submenu__title {font-size: 17px;color: white !important;&:hover {background-color: transparent !important;}}}
2. 问题描述
- .svg-icon 这个 样式只对 一级菜单 “高速公路” 生效！ 二级菜单和 其中的选项则不能生效！
2. 解决方法
- html 文档中 是没有 弹出菜单项（出入口收费站 -> 总流量 。。。）的。
- 他们在 html 文档的末尾可以看到
- 所以 根据 弹出菜单出现的位置 设置样式就可以了！在 el-menu–popup这个样式的基础上作修改
.el-menu--popup {.el-submenu__title{background-color: #0B1423 !important;color: #FFF !important;}.el-menu-item{background-color: #0B1423 !important;color: #FFF !important;}.el-menu-item:hover {background-color: #FFF !important;color: #0B1423 !important;}.el-menu-item.is-active {background-color: #FFF !important;color: #0B1423 !important;}.svg-icon {margin-right: 10px;margin-left: 3px;}
}
4. 总结
修改弹出框元素 不在 el-menu 样式中，我们 需要在 el-menu–popup 中修改样式！