如何根據父組件的 CSS 設定 Angular 子組件的樣式？

如何根據父元件的 CSS 檔案設定子元件的樣式？

問題：

在 Angular 應用程式中，父元件元件包含多個子元件。目標是使用父組件的 CSS 檔案設定子組件的樣式。但是，由於元件隔離，父元件中定義的樣式不會套用於子元件。

解決方案：

更新：已棄用的功能

在Angular 4.3.0 中穿孔CSS 組合器已棄用以及稍後。如果可能，請避免使用此方法。

最新方法：::ng-deep 運算子

要為父元件 CSS 檔案設定子元件樣式，請使用 ::ng -深度運算子。此運算符允許樣式穿透封裝邊界並影響子組件。

:host {
  color: red;
}

:host ::ng-deep parent {
  color: blue;
}

舊方法：穿透CSS 組合器

在引入::ng- 之前可以使用像>>>、/deep/ 和::shadow等深層、穿透性的CSS 組合符。不過，此功能現已棄用，應避免使用。

範例：

:host {
  color: red;
}

:host >>> parent {
  color: blue;
}

以上是如何根據父組件的 CSS 設定 Angular 子組件的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！