如何在Angular中的单个Toast消息中添加自定义CSS？如何运作，但我不希望这些方式：

如何解决如何在Angular中的单个Toast消息中添加自定义CSS？如何运作，但我不希望这些方式：

我的问题：

如何将CSS添加到Angular组件中使用的单个Toast中，因为可以有多个Toast，但我想更改一个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：这是有害的，它将改变我所有的吐司对话。
通过在@component中添加encapsulation: ViewEncapsulation.None，但这会改变我的其他CSS。
通过使用<center>标签：我仍然不想这样做，因为它可以解决我的问题，但是如果我想添加多个CSS，该怎么办。

我该如何实现？

解决方法

您可以使用titleClass属性将css类应用于Toast消息。

def get_yes_or_no(message):
    while True:
        answer = input(message).upper() # convert to upper case
        if answer == 'Y' or answer == 'N':
            return answer
        print('Please enter Y for yes or N for no.')

使用烤面包时，您需要应用 titleClass 和 messageClass ，并且覆盖 css背景图像以 align图标和文字：

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

以全局样式添加CSS类：

Styles.css ：

.center {
  text-align: center;
}

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

如果要以组件样式css添加它，请与：ng-deep 一起使用：

app.component.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

如何在Angular中的单个Toast消息中添加自定义CSS？ 如何运作，但我不希望这些方式：