(element-ui)el-popover样式修改

源代码：

 <el-popover class="menu-popover" placement="bottom" trigger="hover">
              <span slot="reference">组件管理</span>
            <el-menu-item index="1-1">服务管理</el-menu-item>
            <el-menu-item index="1-2">组件包管理</el-menu-item>
            <el-menu-item index="1-3">组件补丁管理</el-menu-item>
            <el-menu-item index="1-4">服务器管理</el-menu-item>
</el-popover>

style:

<style lang="less">
.head-top{
  height: 20px;
  background: rgba(71, 41, 33, 0.42);
}
.el-menu-div{
  height: 60px;
  left: 0;
  background: rgb(191, 186, 184);
  .el-menu-style{
    left: 20%;
    background: rgb(191, 186, 184);
    .menu-popover{
      width: 300px;
      margin: 0;
      padding: 0;
    }
  }
}

</style>

官方文档显示需要使用popper-class才才能配置：

修改后：

<el-popover popper-class="menu-popover" placement="bottom" trigger="hover">
              <span slot="reference">组件管理</span>
            <el-menu-item index="1-1">服务管理</el-menu-item>
            <el-menu-item index="1-2">组件包管理</el-menu-item>
            <el-menu-item index="1-3">组件补丁管理</el-menu-item>
            <el-menu-item index="1-4">服务器管理</el-menu-item>
</el-popover>

但是这样还是不行，最后发现，style配置需要在最外层：

<style lang="less">
.head-top{
  height: 20px;
  background: rgba(71, 41, 33, 0.42);
}
.el-menu-div{
  height: 60px;
  left: 0;
  background: rgb(191, 186, 184);
  .el-menu-style{
    left: 20%;
    background: rgb(191, 186, 184);
  }
}
.menu-popover{
  width: 300px;
  margin: 0;
  padding: 0;
}
</style>