(element-ui) el-popover style modification

source code:

 <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>

The official documentation shows that popper-class is required to configure:

 

After modification:

<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>

But this still doesn't work, and finally found that the style configuration needs to be at the outermost layer:

<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>