如何为不同组件内的antd Popover设置差异化样式及自定义弹出位置？

1. 差异化样式实现 #

antd Popover 原生提供overlayClassName属性，可直接为弹出浮层添加自定义类名，通过后代选择器即可精准控制对应Popover内部的.ant-popover-title、.ant-popover-content等内置节点样式，不会污染全局其他组件。
代码示例：

// 按钮a对应的Popover
<Popover
  title="a的弹出标题"
  content="a的弹出内容"
  overlayClassName="popover-a"
>
  <Button>a</Button>
</Popover>

// 按钮b对应的Popover
<Popover
  title="b的弹出标题"
  content="b的弹出内容"
  overlayClassName="popover-b"
>
  <Button>b</Button>
</Popover>

对应样式代码：

/* 仅修改a的Popover样式 */
.popover-a .ant-popover-title {
  font-size: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.popover-a .ant-popover-content {
  background: #fff7e6;
}

/* 仅修改b的Popover样式 */
.popover-b .ant-popover-title {
  font-size: 14px;
  border-bottom: none;
}
.popover-b .ant-popover-content {
  background: #f6ffed;
}

2. 自定义弹出位置偏移 #

要调整弹出位置的偏移量，直接使用Popover的align属性即可，其offset参数支持传入[水平偏移量, 垂直偏移量]（单位px），正数分别对应向右、向下偏移，负数对应向左、向上偏移。
按需求实现的代码示例：

// a按钮Popover在右侧基础上再向右偏移50px
<Popover
  placement="right"
  align={{
    offset: [50, 0]
  }}
  content="a的弹出内容"
>
  <Button>a</Button>
</Popover>

// b按钮Popover在左侧基础上再向左偏移100px
<Popover
  placement="left"
  align={{
    offset: [-100, 0]
  }}
  content="b的弹出内容"
>
  <Button>b</Button>
</Popover>

如果有更复杂的位置调整需求，也可以配合overlayStyle属性直接给弹出层写内联样式，或者通过前面自定义的类名写CSS定位规则即可。

内容的提问来源于stack exchange，提问作者Wooseong Yang_vuno