css - 如何将自定义 css 添加到 Angular 中的单个 Toast 消息？

Question

我的问题 :
如何将 css 添加到 Angular 组件中使用的单个 Toast，因为可以有多个 Toast 但我想更改单个 Toast？
例如 toast 图片:example toast
我想将我的 css 添加到特定的 toast 消息中。所以，我可以 将消息文本居中对齐 即文件导入开始..
我的 Angular 目录是什么样的

 | app
    |
    |-components
    |    |
    |    |-test [/app.ts , /app.css]
    |
    |style.css
    

我试过的:

我在 CSS 和 TS 代码中添加了以下代码:

我粗略的 app.css 代码

.test {
   text-align : center !important // I tried without ! important also
}

我粗略的 app.ts 代码

import { Component } from '@angular/core';
import {ToastrService} from 'ngx-toastr';

@Component({
  selector: 'my-app',
  templateUrl: './app.html',
  styleUrls: [ './app.css' ]
})

export class app {
  constructor(private toastr: ToastrService) {}

  showSuccess() { 

       // I tried \" test \" also

    this.toastr.success('<span class="test">File import started</span>', '', {

      enableHtml : true   //even I have added the messageClass : 'test' 
    });
  }
}

它是如何工作的，但我不想要这些方式:

通过将我的 css 代码放入 style.css(主要全局 css) (X 我不想改变我的主要风格)

通过添加 ::ng-deep .test instead of .test :这是有害的，它会改变我所有的 toast 对话。

通过添加 encapsulation: ViewEncapsulation.None在@component 中:但这会改变我的其他 CSS。

通过使用 <center>标签:我仍然不想这样做，因为它会解决我的问题，但是如果我想添加多个 css 怎么办。

我怎样才能做到这一点？

Answer 1

使用 toast 时需要应用 titleClass 和 messageClass 并覆盖 css background-image 以对齐图标和文本:

 showSuccess() {
    this.toastr.success("Hello world!", "Toastr fun!", {
      titleClass: "center",
      messageClass: "center"
    });
  }

在全局样式中添加 css 类:
样式.css:

.center {
  text-align: center;
}

.toast-success {
  padding-left: 80px;
  text-align: center;
  background-position: 35% !important;
}

或者使用 :ng-deep 如果要将其添加到组件的样式 css 中:
应用组件.css

:ng-deep .center {
  text-align: center;
}

另一种选择是创建您自己的 Toast 组件来扩展 Toast 并使用它自定义其模板，添加一个 css 类来使文本居中。
Using a Custom Toast
这种情况下的问题是您无法覆盖 css background-image 属性来对齐图标和文本。你只能在styles.css中做到这一点
Changing default icon styles
这是 演示 :
https://stackblitz.com/edit/ngx-toastr-angular2-4pqrqw