將 css 樣式應用於我的 angular 應用程序中的所有primeng 對話框

Question

我在我的 angular 應用程序中使用了主要的 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，但它不起作用。

Answer 1

所以 angular 組件默認采用一種非常方便的樣式封裝策略，這使得樣式不會滲入其他組件並導致不需要的效果。

您可以使用ng-deep就像您必須允許其中定義的樣式被指定位置的子組件繼承一樣。

但是，對於全局繼承的事物，您需要按照開始的順序將它們定義在最高位置，以便這些樣式級聯到下面的選擇器。 在不使用 SCSS 或其他預處理器的默認 Angular 應用程序中，最簡單的方法之一是將它們添加到初始化的第一個文件中，該文件承載子組件（例如index.html或app.component以允許組件之后初始化以在渲染時繼承它們。

希望這有幫助，干杯！