TDesign通知组件的样式怎么自定义不生效？

皇甫雨童提问于 2026-03-08 19:06:17 阅读 43

组件

我用 TDesign 的 Notification 组件，想改一下背景色和字体大小，但加了 class 之后样式没反应，是不是被它的默认样式覆盖了？

我试过在通知配置里加 className，也试过用 !important，都不行。下面是我写的 CSS：

.my-notification {
  background-color: #e6f7ff !important;
  font-size: 14px !important;
}

我来解答赞 10 收藏

反馈

1 条解答

令狐成娟 Lv1

TDesign的Notification组件样式覆盖确实有点坑，我也踩过这个雷。常见解决方案是这几个：

1. 别用普通的className，要用overlayClassName这个属性。TDesign的通知组件其实是封装了rc-notification，样式作用在内部的overlay层上。

2. 你的CSS要加上更具体的选择器，比如：

.tdesign-notification .my-notification {

  background-color: #e6f7ff;

  font-size: 14px;

}

3. 如果还不行，试试在组件调用时这样写：

Notification.info({

  title: '提示',

  content: '消息内容',

  overlayClassName: 'my-notification',

  duration: 3000

});

4. 终极方案是全局修改主题变量，如果你要改的是默认样式的话：

:root {

  --td-notification-bg-color: #e6f7ff;

}

我建议先用第一种方法，不行再上第三种。这破组件样式作用域确实有点深，要不是项目在用TDesign，我早换别的库了...

2026-03-08 19:14