如何在Angular中向单个Toast消息添加自定义css？ 我的问题: 如何将css添加到Angular中组件中使用的单个Toast，因为可以有多个Toast，但我想更改单个Toast？

例如土司图像：

我想将我的css添加到特定的toast消息中。这样，我就可以对齐中间的消息文本即开始导入文件

我的角度目录是什么样子的

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

我尝试的是：

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

我的粗略app.css代码

我粗略的app.ts代码

从'@angular/core'导入{Component}；
从“ngx-toastr”导入{ToastrService}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.html”，
样式URL:['./app.css']
})
导出类应用程序{
构造函数（私有toastr:ToastrService）{}
showSuccess（）{
//我也试过“测试”
this.toastr.success（'文件导入已启动'，''{
enableHtml:true//即使我添加了messageClass:'test'
});
}
}

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

通过将我的css代码放入style.css（主全局css）（X我不想更改我的主样式）

通过添加

：：ng deep.test而不是.test

：这是有害的，它将更改我所有的toast对话

通过在@component:中添加

enclosuration:viewenclosuration.None

，但这将改变我的其他Css

通过使用

标记：我仍然不想这样做，因为这将解决我的问题，但如果我想添加多个css呢

---

如何实现这一点？

您可以使用titleClass属性在toast消息上应用css类

import {ToastrService} from 'ngx-toastr';

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

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

  showSuccess() { 
    this.toastr.success('File import started', '', {
      messageClass: 'test'// this will apply the test class to the toast title.
    });
  }
}

使用toast时，您需要应用titleClass和messageClass，并覆盖css背景图像以对齐图标和文本：

在全局样式中添加css类：

Styles.css：

如果要将其添加到组件的样式css中，请使用：ng deep：

app.component.css

另一种选择是创建您自己的toast组件，扩展toast并使用它自定义其模板，添加css类以使文本居中

本例中的问题是，您无法覆盖css背景图像属性以对齐图标和文本。您只能在styles.css中执行此操作

下面是演示：

---

嗨，这是信息，不是标题。所以我使用了messageClass:'test'，我也使用了您的解决方案。。但不起作用。您的解决方案也适用于messageClass。。如果我在css中使用：：ng deep.test{}。谢谢@AntonioVida。。谢谢你的回复，但我试过了。。请参阅我在“它是如何工作的”一节中的观点（我用4种方法解决了它）。。。我不想将css添加到style.css文件中，而是需要将此添加到app.css中。可能吗？可能我误解了这个概念。还有可能吗？或者这是不可能的，因为运行时样式和toast只能读取style.css（即我们的主样式文件）。嗨@ADARSHKUMARCHOUDHARY，我已经更新了答案和演示。如果您使用自己的自定义toast组件，这是可能的。您好，请参阅注释较少的代码，它将工作，并感谢您发布解决方案（您的解决方案也将工作）。。只需添加一个字段messageClass:“我的自定义类”。。。然后在css文件中使用：：ng deep.my自定义类{在这里添加代码}很好。我也是这样写的！谢谢为什么您认为：：ng深度解决方案有害？您可以将messageClass添加到toast（即messageClass:'exampleToast'）中，并使用

：ng deep.exampleToast.test{//在此处编写自定义css}

，以仅设置toast组件的样式。您好@ilkengin感谢您的回复，您的解决方案已经成功。。我尝试了messageClass:'test'，test{text align:center}它不工作，现在在ng deep之后它工作了。我误解了这个概念，我认为它会改变我所有的烤面包风格。@ilkengin你能解释一下它为什么会起作用以及是如何起作用的吗。。我很感激昨天我使用了：：ng deep.test（我的观点2）。。我面临的是我所有的吐司都改变了（可能是一些语法错误）…好吧，当你说

：：ng deep.test

时，你正在用添加的测试类来设置跨度的样式（参见你的代码）。但是，messageClass会将该类添加到toast消息本身（而不是范围）。因此，当您说：：ng deep.exampleToos.test时，它意味着使用class

test

对元素进行样式化，在另一个元素中使用class

exampleToos

。另外，ng deep帮助您搜索DOM中与您的条件匹配的每个元素。如果不添加ng，则只在组件的html中搜索匹配元素。我希望我能帮忙：）

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' 
    });
  }
}

import {ToastrService} from 'ngx-toastr';

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

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

  showSuccess() { 
    this.toastr.success('File import started', '', {
      messageClass: 'test'// this will apply the test class to the toast title.
    });
  }
}

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

.center {
  text-align: center;
}

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

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