如何使用 ::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>

此 CSS 会将蓝色应用于具有类子元素的所有元素应用程序子组件。

以上是如何使用 ::ng-deep 在 Angular 4 中设置子组件的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！