如何使用 ::ng-deep 覆寫 Angular 4 中的子元件 CSS 屬性？

在Angular 4 中使用::ng-deep 覆蓋子組件CSS 屬性

在Angular 4 中，::ng-deep 選擇器可讓您可以從父元件的CSS 中覆寫子元件的CSS 屬性。這是透過穿透子元件的影子 DOM 邊界來實現的。

用法：

要使用::ng-deep，只需將其添加到CSS 選擇器中以子組件的元素為目標，如下所示：

<code class="css">::ng-deep .child-component {
  /* CSS properties to override */
}</code>

範例：

考慮以下HTML 結構：

<code class="html"><parent-component>
  <child-component class="child"></child-component>
</parent-component></code>

覆蓋子元件中p 元素的樣式，您可以在父父組件中使用以下CSS：

<code class="css">::ng-deep .child p {
  color: red;
}</code>

IE11 支援：

::ng Internet Explorer 11 不支援-deep。如果您需要支援 IE11，則應使用備用 :host-context() 選擇器。然而， :host-context() 有其自身的局限性，可能不適用於所有情況。

以上是如何使用 ::ng-deep 覆寫 Angular 4 中的子元件 CSS 屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！