第一种
可以使用getPopupContainer
<a-popover placement="right" trigger="click":getPopupContainer=" triggerNode => {return triggerNode.parentNode}">
在style样式里面用:deep(antd的class名不知道得可以去浏览器定位copy)
缺点
deep用的多,上下左右都有可能会用到;
当你的父元素用到了overflow属性时靠近你父元素边框的popover组件会有部分隐藏,甚至会导致你父元素撑大,撑出滚动条;其次写多了deep会被老大教育
第二种
给popover添加overlayClassName属性
<a-popoveroverlay-class-name="screen-gantt-popover"<!-- 这里可以是overlayClassName 作者由于eslint的原因 提示要hyphenated(带有连字符号的) -->>
然后再style里面就可以正常写样式诶就是不写,就是玩儿!(主要是我不知道你要的是哪个方向的,所以还是去浏览器定位copy)
.screen-gantt-popover > .ant-popover-content > .ant-popover-inner {min-width: 277px !important;box-shadow: 0px 1px 6px 0px rgba(149,198,255,0.59) !important;}.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow {background: rgba(18, 26, 39,0.8) !important;border-top-color: rgba(18, 26, 39,0.8) !important;border-left-color: rgba(18, 26, 39,0.8) !important;box-shadow: -3px -3px 6px rgba(149,198,255,0.59) !important;border-right-color: transparent !important;border-bottom-color: transparent !important;}.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow {background: rgba(18, 26, 39,0.8) !important;border-bottom-color: rgba(18, 26, 39,0.8) !important;border-right-color: rgba(18, 26, 39,0.8) !important;box-shadow: 3px 3px 6px rgba(149,198,255,0.59) !important;border-left-color: transparent !important;border-top-color: transparent !important;}
注意!注意!注意!
缺点
该方法要去掉 scoped 如果会影响到你其他页面慎重考虑
效果图图一为第一种方法(getPopupContainer)的结果,图二为第二种方法(overlayClassName)结果
![请添加图片描述](https://img-/fd1df1acd1e141248d9226b271e5fa40.png
如还有其他的方法请还请指教