element-ui navmenu 高度

Question

在vue-cli下使用element-ui，
使用了其中的menu-sider-bar
https://element.eleme.io/#/en-US/component/menu#side-bar
但是其中列表的单行高度太高了，不知如何改低。
其中的子项可以通过修改el-menu-item的高度实现，但是父项却不知如何修改，
`

<el-submenu index="1">
    <template slot="title">
      <span> menu</span>
    </template>
    <el-menu-item class="sub-menu" index="1-1" >
      submenu
    </el-menu-item>
</el-submenu>

`
如上，submenu段可通过修改class="sub-menu"的css实现，但是menu段不知如何实现（无法通过修改template的css实现）。
经运行，生成的html中会有一段class="el-submenu__title"的div,其css中有height:56px;inline-height:56px;,将其取消之后高度变短，但是这个class仅在运行后才会有，源代码中没有，而且在源码中加入相关css也无作用。
不知如何更改其高度

Answer 1

对于修改ElementUI的官方样式，您可以参考下这个问题下我回答的。修改element样式
对于你的问题，个人推荐第四种方式

Answer 2

F12了一下，navmenu在html中实际如下：

修改高度：

1. 在ul中增加一个父级class,避免把全局navmenu样式全给改了;
2. 修改li的height和line-height：

1. 遇到我的工作台这样子选项的，接着修改它的li样式：

1. 如何修改：

可以尝试一下这两个地方添加自定义class，然后f12里改动；

Answer 3

是的，通过vue下面的style搞不定这两个参数，可能这个高度是后期自动生成的吧，我是通过直接修改element-ui的css文件修改的

我是把所有element-ui组件都加载了的，所以只需要修改：./node_modules/element-ui/lib/theme-chalk/index.css文件中的下列两个60px为40px即可