Ant Design 的 Notification 通知怎么自定义样式不生效？

Zz慧丽提问于 2026-03-29 19:49:14 阅读 2

组件

我在用 Ant Design 的 notification 组件时，想改一下背景色和文字颜色，但按照文档传了 className 或 style 好像都没用。比如我试过 notification.open({ className: 'my-notice' })，然后在 CSS 里写了样式，但完全没效果。

是不是因为 notification 是动态挂载到 body 上的？那我的样式作用域是不是没覆盖到？有谁成功自定义过 notification 样式的？求指点！

.my-notice {
  background-color: #ffeaa7 !important;
  color: #2d3436 !important;
}

我来解答赞 4 收藏

反馈

1 条解答

一羽墨 Lv1

这问题我也踩过坑，直接说解决方案吧。

Ant Design 的 notification 确实是动态创建的，className 直接用有时候确实没效果。你得用全局样式或者更深的选择器才行。

先给个简单粗暴的解决办法，直接覆盖 Ant Design 的默认样式：

.ant-notification-notice {

  background-color: #ffeaa7 !important;

  color: #2d3436 !important;

}

如果想保持一点样式隔离性，可以用更高优先级的选择器组合，比如这样：

.my-notification .ant-notification-notice {

  background-color: #ffeaa7 !important;

  color: #2d3436 !important;

}

然后在 open 方法里加上 prefixCls: 'my-notification' 这样：

notification.open({

  message: '标题',

  description: '内容',

  prefixCls: 'my-notification'

});

记得样式要放在 index.css 或者全局引入的文件里，不然可能还是不生效。antd 的组件设计就是这样的，有时候确实挺烦人。

2026-03-29 20:02