vue之el-menu-item如何更改导航菜单栏选中的背景颜色

el-menu-item更改导航菜单栏选中的背景颜色

修改element导航栏选中时的背景色，可以通过设置 .el-menu-item.is-active 选择器的样式属性 【background-color】使用 !important 使得优先级最大。

如下：

.el-menu-item.is-active {
      background-color: #3370ff !important;
      color: #fff;
      span {
        color: #fff !important;
      }
    }

element的导航栏修改其选中时颜色的问题

修改element导航栏选中时的背景色，通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。

于是……

.el-menu-item.is-active {
  background: #247bb4 !important;
}

以为完事了吗？

不不不

正常使用时效果确实达到了

但是长时间闲置页面，再回头看这个页面时会出现

哪里来的灰色？？？

鼠标点击界面任意位置，灰色立马消失……

我……

疯狂百度，没人有这种情况

但是看到别人的代码如下：

.el-menu-item.is-active {
  background-color: #247bb4 !important;
}

于是尝试着用background-color替换background

好像还真的OK了再也没出现过如上情况了

然后过了好几个月，发现这个现象还是存在

一次偶然的机会，被我捕获到了问题哈哈哈

莫名其妙这个时候会给当前元素加上background-color: rgb(204, 204, 204);

然后只要点击屏幕，瞬间这个值会变成background-color: rgba(0, 0, 0, 0.1);

所以，我只要给它默认设一下背景色就好了啊！！！

修改代码如下：

.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

这次是真的OK了！！！

心塞啊心塞，这个还是没解决

因为直接强制修改el-menu-item的背景色，会导致想要它变色的时候变不了了啊啊啊，脑壳痛。

直接看最终样式修改

因为需要菜单透明，于是乎这么设置以后很久没有给我蒙上一层灰了。

<el-menu router class="el-menu-vertical-demo menu-Bar" background-color="rgba(36,123,180,0.51)" text-color="#b4dbf4" active-text-color="#7BE4FF">
  <navMenu :navMenus="menuData"></navMenu>
</el-menu>
.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1);
}
.el-menu-item.is-active {
  background-color: #247bb4 !important;
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。