将 css 样式应用于我的 Angular 应用程序中的所有启动对话框答案

【问题标题】：Apply css style to all primeng dialogs in my angular app将 css 样式应用于我的 Angular 应用程序中的所有启动对话框
【发布时间】：2020-05-02 16:32:44
【问题描述】：

我在我的 Angular 应用程序中使用 Prime ng 对话框。我可以使用 ng-deep 更改每个特定的对话框样式。例如，我有联系我们的页面，我有这些文件：

contact.html
contact.component.ts
contact.css

所以我将下面的 css 放在 contact.css 中，它会改变联系我们对话框标题栏的颜色。

:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
    background-color: red
}

我想为我的应用程序中的所有对话框执行此操作，我该如何执行此操作？我在 src 文件夹中的 style.css 文件中放置了相同的 css，但它不起作用。

【问题讨论】：

假设您使用的只是一个好的 'ol 默认 angular 结构，只需将其放在初始顺序的最高点即可。就像 index.html 中的 app.component.css 或事件 <style>.ui-dialog .ui-dialog-titlebar{ background-color: red}</style> 一样，有很多技术，有些技术被认为比其他技术更干净，但有助于了解您的设置的默认设置以提供最佳实践。
看起来把它放在 app.component.css 中就可以了。你能把你的评论作为答案，所以我可以接受吗？在网上查了很多，没找到提到这个的。

标签： javascript css angular styles primeng

【解决方案1】：

因此，默认情况下，角度组件采用非常方便的 Style Encapsulation 策略，这样样式就不会渗入其他组件并造成不良影响。

您可以使用ng-deep，就像您必须允许其中定义的样式被指定位置的子组件继承一样。

但是，对于要全局继承的事物，您需要按照初始顺序将它们定义为最高，以便这些样式级联向下到下面的选择器。在不使用 SCSS 或其他预处理器的默认 Angular 应用程序中，最简单的方法之一是将它们添加到第一个初始化的文件中，该文件承载子组件，例如 index.html 或 app.component 以允许组件之后初始化以在渲染时继承它们。

希望这会有所帮助，干杯！

【讨论】：