如何使用 ::ng-deep 在 Angular 中设置其父级嵌套组件的样式？-css教程-PHP中文网

如何使用 ::ng-deep 在 Angular 中设置其父级嵌套组件的样式？

Susan Sarandon

发布： 2024-10-29 00:19:30

原创

436 人浏览过

How can I style nested components from their parent in Angular using ::ng-deep?

在 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中文网其他相关文章！