关于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  阅读(231)  评论(0)  编辑  收藏  举报