如何在Angular中的单个Toast消息中添加自定义CSS？

Question

我的问题:

例如，烤面包图片：示例烤面包

我想将我的CSS添加到特定的烤面包消息中，以便我可以将消息文本居中对齐，即文件导入已开始..

我的Angular目录长什么样？

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

我尝试的：

1. 我将以下代码添加到我的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' 
    });
  }
}

如何实现，但我不想用以下方式：

1. 将我的CSS代码放入style.css（主要全局CSS）中 （X 我不想改变我的主要样式）
2. 通过添加::ng-deep .test而不是.test：这很危险，它会更改所有我的toast-dialogue。
3. 在@component中添加encapsulation: ViewEncapsulation.None：但这将更改我其他的CSS。
4. 使用<center>标签：仍然不想这样做，因为它会解决我的问题，但如果我想添加多个CSS呢？

我该如何实现？

- ADARSH KUMAR CHOUDHARY

---

你为什么认为 ::ng-deep 解决方案是有害的？你可以在 toast 中添加 messageClass（例如 messageClass: 'exampleToast'），并使用 ::ng-deep .exampleToast .test { // 在这里编写您的自定义 CSS } 来仅为您的 toast 组件设置样式。 - ilkengin

嗨@ilkengin，感谢您的回复，您的解决方案有效。我尝试了messageClass：'test'和.test {text-align:center}，但它没有起作用，现在经过ng-deep后它可以工作了。我误解了这个概念，我以为它会改变所有toast的样式。 - ADARSH KUMAR CHOUDHARY

@ilkengin，你能解释一下为什么以及如何起作用吗？非常感谢。 - ADARSH KUMAR CHOUDHARY

昨天我使用了 ::ng-deep .test (我的第二个观点) .. 然后我遇到的问题是所有的提示框都改变了（可能是一些语法错误）。 - ADARSH KUMAR CHOUDHARY

当你使用::ng-deep .test时，你是在为添加了test类的span设置样式（请参见你的代码）。然而，messageClass将类添加到你的toast消息本身（而不是span）。因此，当你说::ng-deep .exampleToast .test时，它意味着样式应用于具有class test的元素，该元素位于具有class exampleToast的另一个元素内部。此外，ng-deep帮助你搜索与你的条件匹配的DOM中的每个元素。如果你不添加ng-deep，Angular只会在你组件的html中搜索匹配的元素。希望我能帮到你 :) - ilkengin

谢谢，我理解了这个概念。实际上，在上面的语句中，我的所有烤面包的对齐方式都改变了。当我使用messageClass时，我没有使用span标签。 - ADARSH KUMAR CHOUDHARY

Answer 1

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

 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，然后使用它来自定义模板并添加一个用于居中文本的CSS类。

使用自定义Toast

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

更改默认图标样式

这里是演示：

https://stackblitz.com/edit/ngx-toastr-angular2-4pqrqw

- Antonio Vida

---

嗨@AntonioVida，谢谢回复，但我已经尝试过了。请看我的解决方法部分（我用了4种方法解决了它）...我不想将我的CSS添加到style.css文件中，而是需要添加到app.css中...这可能吗？ - ADARSH KUMAR CHOUDHARY

也许我误解了这个概念。不过，这是可能的吗？还是因为运行时样式和toast只能读取style.css（即我们的主样式文件），所以不可能呢？ - ADARSH KUMAR CHOUDHARY

嗨@ADARSHKUMARCHOUDHARY，我已更新答案和演示。如果您使用自己的自定义toast组件，则可以实现。 - Antonio Vida

嗨，看一下注释，减少代码量，它就能工作了。感谢您发布解决方案（您的解决方案也可以工作）...只需添加一个字段 messageClass: 'my custom class' ...然后在 CSS 文件中使用 ::ng-deep .my custom class { 在这里添加您的代码 } - ADARSH KUMAR CHOUDHARY

太好了。我也这样写下来！谢谢！ - Antonio Vida

Answer 2

您可以使用 `titleClass` 属性将 CSS 类应用于 toast 消息。

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

- Noman Fareed

---

嗨，这是一条消息而不是标题。所以我使用了messageClass：'test'，我也尝试了你的解决方案，但没有起作用。 - ADARSH KUMAR CHOUDHARY

您的解决方案也适用于 messageClass .. 如果我在CSS中使用 ::ng-deep .test {}，谢谢。 - ADARSH KUMAR CHOUDHARY