ant design vue中Popover气泡卡片 修改样式无效

ant design vue中Popover气泡卡片 修改样式无效

最近，新项目用的框架是 ant-desgin-vue

用到了一个Popover气泡卡片，想要修改气泡卡片的样式。

而我理想状态应该是：

于是设置css如下所示：

<style lang="less" scoped>
.showTag{
    
    
    display: inline-block;
    margin-left: 5px;
}
</style>

发现，设置无效，如果把scoped去掉就行，但这不是我想要的，我不想影响其他组件。
调试界面，发现，popover把代码渲染到了body里，这样就和我当前组件平级了。查api，发现了这样一个getPopupContainer参数，于是代码做了如下改动：

<a-popover placement="right" trigger="click"
	:getPopupContainer=" triggerNode => {
    
     
 		return triggerNode.parentNode
 	}"
 >

getPopupContainer的作用是设置浮层渲染父节点，默认渲染到 body 上。

这样再改css样式。

<style rel="stylesheet/scss" scoped>
.navbar {
    
    
    /deep/ .ant-popover-inner-content{
    
    
         padding:0;
     }
}
</style>