如何使用 ::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中文网其他相关文章！