如何在 Angular 中透過父組件的 CSS 設定子組件的樣式？

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

在 Angular 中，從父元件的 CSS 檔案設定子元件的樣式需要一種穿透元件作用域的方法。以下是克服這項限制的方法。

更新（Angular 4.3.0 及更高版本）

隨著穿孔 CSS 組合器的棄用，引入了一種新組合器 ::ng-deep。它允許您定位 DOM 結構深處的子組件。

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

舊方式（4.3.0 之前的Angular 版本）

在::ng-deep 之前，您可以使用穿透CSS 組合符，例如>>>、/deep / 和::shadow 來穿透元件邊界。但是，請注意，這些組合器已被棄用，應盡可能避免使用。

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

替代方法

• 封裝模式：預設情況下，元件被封裝使用 Shadow DOM，防止樣式洩漏到元件之外。您可以透過在元件裝飾器 (@Component) 中將 encapsulation 屬性設為 None 來停用封裝。
• styleUrls: 在子元件中使用 styleUrls 屬性從父元件匯入樣式。這允許您在子元件的範圍內存取父元件的樣式表。但是，這種方法需要在父元件的樣式表中手動定義子元件的樣式。

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