如何使用 ::ng-deep 在 Angular 中設定其父級嵌套組件的樣式？

在Angular 中使用::ng-deep 簡化陰影穿透樣式

需要從父級設定嵌套元件的樣式是一個常見的挑戰在角度。雖然已棄用的 /deep/ 組合器曾經是一種解決方案，但現在建議使用 ::ng-deep 選擇器。

::ng-deep

::ng-deep 允許您穿透組件封裝並將樣式從父組件應用於子組件。當您需要覆蓋或補充子級現有樣式時，此功能特別有用。

語法和範例

::ng-deep 的語法如下：

<code class="css">::ng-deep {
  /* Styles to apply to child components */
}</code>

例如，如果您有一個帶有div 元素的父組件，並且想要為其子組件中的段落元素設定樣式，則可以使用以下代碼：

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

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

此CSS將覆蓋子組件中段落元素的預設顏色。

IE11相容性

需要注意的是::ng-deep Internet Explorer 11 不支援。因此，如果您的目標是 IE11，則可能需要探索陰影穿透樣式的替代方法，例如將子元件包裝在 div 中並改為對該 div 進行樣式設定。

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