Как добавить собственный CSS к одному Toast-сообщению в Angular? ⇐ CSS

[Anonymous]

МОЙ ВОПРОС:Как добавить CSS к одному всплывающему сообщению, используемому в компонентах Angular, поскольку всплывающих уведомлений может быть несколько, но я хочу изменить одно всплывающее уведомление?
Например, изображение всплывающего уведомления: пример всплывающего сообщения
Я хочу добавить свой CSS к конкретному всплывающему сообщению. Чтобы я мог выровнять текст сообщения по центру т.е. начался импорт файлов.
как выглядит мой каталог Angular

Код: Выделить всё

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

Что я пробовал:

• Я добавил следующие коды в свой код CSS и TS:
  < /li>

мой примерный код app.css[/b]

Код: Выделить всё

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

мой примерный код app.ts[/b]

Код: Выделить всё

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('File import started', '', {

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

КАК ЭТО РАБОТАЛО, НО Я НЕ ХОЧУ ТАКИХ СПОСОБОВ:

поместив свой CSS-код в стиль. css (основной глобальный CSS) (X Я не хочу менять свой основной стиль)
[*]добавив ::ng-deep .test вместо .test< /code> : это вредно изменит весь мой всплывающий диалог.
[*]добавив инкапсуляцию: ViewEncapsulation.None в @comComponent: но это изменит мой другой Css.
[*]с помощью тега : все равно я не хочу этого делать, потому что это решит мою проблему, но что, если я захочу добавить несколько CSS.

Как я могу достичь это?

Подробнее здесь: https://stackoverflow.com/questions/645 ... in-angular