ant-design-vue的a-popover 改变样式的方法

给popover添加overlayClassName属性

<a-popover
	overlay-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 如果会影响到你其他页面慎重考虑

猜你喜欢

转载自blog.csdn.net/weixin_53841730/article/details/131224148