最近在重写一个网站,网站本身是用原生js写的,但是自己想要提高一下使用vueCLI和elementUI的能力,就选择了这两种来写。
在写导航栏菜单的时候遇到问题,我想要单独更改二级菜单的样式,发现无论是使用/deep/、!important、::v-deep,设置的样式都不管用。
就去看官方文档,发现subMenu有一个popper-class自定义类名属性,就设置了一个自定义类名,通过自定义类名去设置二级菜单的样式。结果还是不生效。
最后查了很久资料。发现通过prop-class自定义类名修改的样式要放在App.vue的style里才能生效
<el-submenu index="2" popper-class="navTwo">
<template slot="title">最新动态</template>
<el-menu-item index="2-1">工作动态</el-menu-item>
<el-menu-item index="2-2">民调要闻</el-menu-item>
<el-menu-item index="2-3">媒体报道</el-menu-item>
<el-menu-item index="2-4">行业快递</el-menu-item>
</el-submenu>
样式修改: