记录开发vue+el-menu样式坑

## 当所有菜单都是无子菜单时，混入一个子菜单引发的样式问题
即：
菜单一
菜单二
菜单三
    菜单三-三
菜单四

这个时候在el-menu设置时：

<el-menu
      text-color="灰色"
      background-color:"红色"
      active-text-color="白色"
      class="learning-content-left"
      :default-active=""
      @select=""
      :unique-opened=""
    >

这个时候问题就来了：
background-color:“红色” 本来应该是active和hover的样式
但若无单独设置样式的话，菜单一，菜单二，菜单四的active和hover就一直为白色
菜单三 和 菜单三-三 则一直会是红色的样式

小坑来了：
这个时候通过:
去掉background-color

:deep(.el-menu) {
	.el-menu-item {
		font-size: 16px;
		color: 灰色;
		font-weight: 600;
		&:hover {
			color: 白色;
			background-color: 红色;
		}
	}
    .el-menu-item.is-active {
    	color: 灰色;
    	background-color: 红色;
    }
}

来进行样式设计的时候，你会发现：
菜单一，菜单二，菜单三，菜单四 完全没有一点变化
反而是菜单三-三能根据样式来进行改变
无论你怎么看代码都感觉没有太多的问题

搜了半天你终于找到了菜单三的样式修改添加了上去：

    :deep(.el-sub-menu__title) {
      font-size: 16px;
      font-weight: 600;
      background-color: 白色 !important;
      &:hover {
        color: #fff !important;
        background-color: 红色 !important;
      }
    }

然后发现然并卵，只有菜单三有了样式变化，而菜单一，菜单二，菜单四无任何变化，接下来就是长时间的搜索修改，脑子都炸了
突然发现了另外一个坑：

    .el-menu-item {
      font-size: 16px;
      color: 灰色;
      font-weight: 600;
      &:hover {
        color: 白色;
        background-color: 红色;
      }
    }
    .el-menu-item.is-active {
      color: 白色;
      background-color: 红色;
    }

这个代码可以直接修改菜单一，菜单二，菜单四，却无法修改菜单三和菜单三-三
这时候懂哥应该明白了将上面设置综合到一起就行了
但有个前提那就是：

<el-menu
      text-color="灰色"
      background-color:"红色"  -- 这行代码删除的前提下
      active-text-color="白色"
      class="learning-content-left"
      :default-active=""
      @select=""
      :unique-opened=""
    >

于是我在background-color一直存在的情况下修改，直接头脑风暴，拼凑了天坑把自己埋了

所以最终版本应该是：

<el-menu
      text-color="灰色" 
      active-text-color="白色"
      class="learning-content-left"
      :default-active=""
      @select=""
      :unique-opened=""
    >


	:deep(.el-menu) {
		.el-menu-item {
			font-size: 16px;
			color: 灰色;
			font-weight: 600;
			&:hover {
				color: 白色;
				background-color: 红色;
			}
		}
  	 	.el-menu-item.is-active {
    		color: 灰色;
    		background-color: 红色;
    	}
	}

    :deep(.el-sub-menu__title) {
      font-size: 16px;
      font-weight: 600;
      background-color: 白色 !important;
      &:hover {
        color: #fff !important;
        background-color: 红色 !important;
      }
    }
    
    .el-menu-item {
      font-size: 16px;
      color: 灰色;
      font-weight: 600;
      &:hover {
        color: 白色;
        background-color: 红色;
      }
    }
    .el-menu-item.is-active {
      color: 白色;
      background-color: 红色;
    }