关于element-ui的.el-submenu__title不能修改样式问题笔记

本文主要是介绍关于element-ui的.el-submenu__title不能修改样式问题笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目中需要修改element-ui中NavMenu的样式，在修改划过样式时，发现.el-menu-item可以直接修改，但.el-submenu__title修改样式不生效

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

解决办法：

1.

/* 深选择器：如果相对设置了scoped的子组件里的元素进行控制可以使用'>>>'或者'deep'设置选中或悬浮的颜色*/
.el-submenu /deep/ .el-submenu__title {
    height: 50px !important;
    line-height: 50px !important;
  }
测试没效果..应该是我的问题

2.

按照在操作台中看到的class名，写在全局（非scoped）的style中，
此处的class名是.el-submenu__title

<style>
.el-submenu__title{
  font-size: 1.8em !important;
}
</style>

测试有效
 

这篇关于关于element-ui的.el-submenu__title不能修改样式问题笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---