如何调整Ant Design Notification组件图标的垂直位置？

我在使用Ant Design开发Notification组件时，将其高度设置为40px，但发现通知图标无法通过负margin-top上移，需要可行的调整方法。

1. 用高优先级CSS选择器强制覆盖样式 #

Ant Design的Notification图标默认自带垂直居中样式，直接写负margin大概率会被内置样式覆盖。你可以用更精确的选择器锁定图标元素，调整位置：

/* 定位图标容器 */
.ant-notification-notice .ant-notification-notice-icon {
  /* 用负margin调整，数值按需修改 */
  margin-top: -4px;
  /* 或者用transform更灵活，不影响其他布局 */
  transform: translateY(-2px);
}

注意要确保自定义样式文件在Ant Design样式之后引入，保证优先级；如果仍不生效，可临时加!important（尽量少用，避免样式冲突）。

2. 调整图标容器的line-height #

因为你把Notification高度改成了40px，默认line-height和新高度不匹配，导致图标垂直位置偏移。试试调整图标的line-height：

.ant-notification-notice-icon {
  line-height: 32px; /* 设为小于40px的值，让图标自然上移 */
}

3. 自定义前缀类名提升样式优先级 #

如果项目使用Ant Design的ConfigProvider，可以给Notification设置自定义前缀类名，让你的样式优先级更高：

import { ConfigProvider, notification } from 'antd';

// 初始化配置自定义前缀
ConfigProvider.config({
  prefixCls: 'my-notification',
});

然后编写对应样式：

.my-notification-notice .my-notification-notice-icon {
  transform: translateY(-3px);
}

4. 直接自定义图标组件 #

如果以上方法都不生效，干脆直接自定义Notification的图标，手动控制位置：

notification.open({
  message: '通知标题',
  description: '通知内容',
  // 给图标加行内样式
  icon: <span style={{ display: 'inline-block', marginTop: '-2px' }}>🔔</span>,
  // 或者用自定义图标组件
  icon: <MyNotificationIcon style={{ transform: 'translateY(-2px)' }} />,
});

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