vue3+elementplus关于menu菜单箭头样式修改

 element默认箭头是上下。在网上搜了好久发现虽然能改掉箭头的样式，但是子菜单的箭头样式也会修改。

 如图，这是我们要求显示的结果，但是其实实际实现的时候子菜单的箭头样式并没有改变。网上搜到的代码大都是这样

//菜单关闭
.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
    -webkit-transform: rotateZ(-90deg); 
    -ms-transform: rotate(-90deg);
    transform: rotateZ(-90deg); 
}
//菜单展开
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
    -webkit-transform: rotateZ(0deg); 
    -ms-transform: rotate(0deg);
    transform: rotateZ(0deg); 
}

或者这样，

  /*菜单关闭*/
  .el-submenu /deep/ .el-submenu__title .el-submenu__icon-arrow{
    -webkit-transform: rotateZ(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotateZ(-90deg);
  }
  /*菜单展开*/
  .el-submenu.is-opened /deep/ .el-submenu__title .el-submenu__icon-arrow{
    -webkit-transform: rotateZ(0deg);
    -ms-transform: rotate(0deg);
    transform: rotateZ(0deg);
  }

自己仔细研究了下，原来是选择器的问题，

 

改为，这样

.el-sub-menu :deep(.el-sub-menu__icon-arrow) {
    transform: rotate(-90deg) !important;
}

/*菜单展开箭头样式*/
.el-sub-menu.is-opened> :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
    transform: rotate(0deg) !important;
}

解决。

烦死了下，其实归根结底，还是自己研究的不透彻，没有好好去看，就是一个小箭头的问题。