如何使用 ::ng-deep 在 Angular 4 中設定子元件的樣式？

使用::ng-deep 在Angular 4 中設定子組件的樣式

從父組件到子組件覆蓋CSS 屬性可能是一項常見任務有角。在 Angular 4 中，您可以利用 ::ng-deep 選擇器來完成此操作。

::ng-deep，以前稱為/deep/，後來稱為>>> ，是一個陰影穿透組合器，它允許樣式向下級聯到嵌套元素，即使它們封裝在子組件中也是如此。這在自訂外部元件或庫中元素的外觀時特別有用。

用法

要使用 ::ng-deep，只需將其新增至 CSS 選擇器前面您想要套用於子元件的元素。例如：

.parent {
  ::ng-deep .child-element {
    color: red;
  }
}

相容性

需要注意的是，Internet Explorer 11 (IE11) 不支援 ::ng-deep。這是因為 IE11 不支援陰影穿透組合器。因此，建議在 IE11 中使用替代方法來設定子元件的樣式，例如使用視圖封裝標誌或建立公開所需樣式的 Angular 模組。

範例

考慮以下HTML：

<code class="html"><div class="container">
  <app-child-component></app-child-component>
</div></code>

以及下列CSS：

<code class="css">.container {
  ::ng-deep {
    .child-element {
      color: blue;
    }
  }
}</code>

以上是如何使用 ::ng-deep 在 Angular 4 中設定子元件的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！