element ui修改路由菜单及树视图样式

element ui官方提供的主要为白色主题，当我们需要修改导航及树视图控件的时候可以用以下方法修改

  /* 菜单选中时的样式 */
.el-menu-item.is-active {
    color: white !important;
    background: #242f42!important;
}
//鼠标经过时样式
.el-menu-item:hover{
    color: white !important;
    background: #242f42!important;
    border-bottom: 2px solid #409eff!important;
}


/* 树视图小图标 */
  .tree_yellow{
    color:rgba(241,196,15);
  }
  .sidebar>.el-tree {
    color: rgb(191, 203, 217);
    background:rgb(50, 65, 87) ;
}
/* 树节点鼠标悬浮式改变背景色，字体颜色 */
.el-tree-node__content:hover{
  background-color: rgb(40, 52, 70)!important;
  color: white!important;
}
.el-tree-node:focus > .el-tree-node__content {
    background-color: rgb(40, 52, 70)!important;
    color:#409eff!important;
  }

最终实现效果如下