Ant Design Vue 中 notification.useNotification 的样式配置问题解析

问题背景

在 Ant Design Vue 4.2.5 版本中，开发者在使用 notification.useNotification 方法时遇到了一个样式配置不生效的问题。具体表现为：当尝试通过参数配置通知框的 top 属性时，设置的值无法覆盖默认样式。

问题现象

开发者期望通过以下方式设置通知框距离顶部的距离为 80px：

const [api, contextHolder] = notification.useNotification({
  top: '80px'
});

然而实际渲染后，通知框仍然保持默认的 24px 顶部距离，配置未能生效。

技术分析

底层实现机制

通过分析源码发现，这个问题源于 Vue 3 的属性传递机制与组件内部实现的不匹配：

1. 属性传递问题：在 Vue 3 中，未被组件显式声明的 props 会默认放入 attrs 而非 props 中
2. 样式计算逻辑：Holder 组件内部通过 getStyles 方法计算样式时，只检查了 props.top 而忽略了 attrs.top
3. 静态方法差异：直接使用 notification.info 等静态方法时不存在此问题，因为它们的实现路径不同

图标差异问题

同时观察到的另一个现象是：notification.useNotification 生成的通知框图标与静态方法生成的图标样式不一致。这可能是由于：

1. 两种实现方式使用了不同的图标渲染逻辑
2. 可能是设计上的有意区分，也可能是实现上的不一致

解决方案

对于开发者而言，可以采取以下临时解决方案：

1. 使用 CSS 覆盖：通过全局样式覆盖默认的 top 值
2. 等待官方修复：这个问题已被标记为 stale，开发者可以关注后续版本更新

最佳实践建议

在使用 Ant Design Vue 的通知功能时：

1. 对于简单场景，优先考虑使用静态方法
2. 需要复杂控制时，注意检查样式配置是否生效
3. 保持关注官方更新日志，及时获取问题修复信息

总结

这个案例展示了 Vue 3 属性传递机制与组件库实现之间的微妙关系，提醒开发者在遇到类似问题时，不仅要检查 API 使用方式，还需要了解底层实现原理。同时，组件库开发者也需要确保不同使用方式间的一致性，避免给使用者带来困惑。