如何使用Angular修改Toast消息的文本颜色

你当前使用的调用代码翻译后为：self.showToast('仅允许同时对比最多2个研究', 'warning');

修改颜色的核心逻辑是找到warning类型Toast对应消息文本的DOM节点类名，通过CSS覆盖样式实现，以下是不同场景的具体操作：

常用第三方Toast库修改方案 #

1. ngx-toastr（Angular生态最常用的Toast库） #

• 全局修改所有警告类Toast的文本颜色
  在AppModule导入ToastrModule的位置新增配置：

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    ToastrModule.forRoot({
      warning: {
        textColor: '#ffeb3b' // 替换为你需要的颜色值
      }
    })
  ]
})
export class AppModule { }

• 仅修改单次调用的Toast文本颜色
  调用时新增配置参数：

self.showToast('仅允许同时对比最多2个研究', 'warning', {
  messageClass: 'custom-warning-text'
});

在全局样式文件（如styles.scss/styles.css）中新增对应样式：

.custom-warning-text {
  color: #ffeb3b !important;
}

• 全局样式强制覆盖
  无需修改配置，直接在全局样式中添加以下代码即可：

.toast-warning .toast-message {
  color: #ffeb3b !important;
}

2. PrimeNG Toast #

• 全局修改警告类Toast文本颜色，在全局样式中添加：

.p-toast-message-warning .p-toast-detail {
  color: #ffeb3b !important;
}

• 单次调用自定义样式：

this.messageService.add({
  severity: 'warning',
  detail: '仅允许同时对比最多2个研究',
  styleClass: 'custom-warning-toast'
});

对应样式：

.custom-warning-toast .p-toast-detail {
  color: #ffeb3b !important;
}

3. Angular Material Snackbar #

直接修改全局样式即可：

.mat-snack-bar-container.warn .mat-simple-snackbar {
  color: #ffeb3b !important;
}

自定义封装Toast服务修改方案 #

如果showToast是你业务内自行封装的方法，直接找到方法内部渲染消息文本的逻辑，给warning类型的文本节点绑定自定义颜色样式即可。

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