如何在 Angular 中通过父组件的 CSS 设置子组件的样式？

如何从父组件的 CSS 文件设置子组件的样式？

在 Angular 中，从父组件的 CSS 文件设置子组件的样式需要一种穿透组件作用域的方法。以下是克服这一限制的方法。

更新（Angular 4.3.0 及更高版本）

随着穿孔 CSS 组合器的弃用，引入了一种新组合器 ::ng-deep。它允许您定位 DOM 结构深处的子组件。

:host ::ng-deep parent {
  color: blue;
}
:host ::ng-deep child {
  color: orange;
}

旧方式（4.3.0 之前的 Angular 版本）

在 ::ng-deep 之前，您可以使用穿透CSS 组合符，例如 >>>、/deep/ 和 ::shadow 来穿透组件边界。但是，请注意，这些组合器已被弃用，应尽可能避免使用。

:host >>> parent {
  color: blue;
}
:host >>> child {
  color: orange;
}

替代方法

• 封装模式：默认情况下，组件被封装使用 Shadow DOM，防止样式泄漏到组件之外。您可以通过在组件装饰器 (@Component) 中将 encapsulation 属性设置为 None 来禁用封装。
• styleUrls: 在子组件中使用 styleUrls 属性从父组件导入样式。这允许您在子组件的范围内访问父组件的样式表。但是，这种方法需要在父组件的样式表中手动定义子组件的样式。

以上是如何在 Angular 中通过父组件的 CSS 设置子组件的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！