关于element-ui修改.el-submenu__title悬浮样式不生效的问题

以下内容仅供个人学习使用

据网友分析原因:二级菜单是使用slot添加的,单独给这个slot添加样式,等渲染出来,样式没有了,需要有深选择器。

  1. 可以使用深选择器,加入以下样式方可解决问题
/* 深选择器:如果相对设置了scoped的子组件里的元素进行控制可以使用'>>>'或者'deep'设置选中或悬浮的颜色*/
.el-submenu /deep/ .el-submenu__title:hover {
  background-color: rgb(48, 64, 110) !important;
  border-radius: 10px;
}
  1. 效果图

image

posted @ 2023-03-20 18:49  Amyel  阅读(300)  评论(0编辑  收藏  举报