Angular 5中如何让子组件使用父组件的CSS样式？

在Angular 5里，组件默认的ViewEncapsulation机制会把每个组件的样式封装起来，父组件的样式默认不会作用到子组件内部。不过有几种实用的方法可以实现你想要的效果，下面给你详细说明：

方法1：使用::ng-deep深度选择器 #

这是Angular中专门用来穿透样式封装的选择器，能让父组件的样式精准作用到嵌套的子组件上，而且不会污染全局样式。

示例代码： #

父组件的CSS文件：

/* 父组件自身样式 */
.parent-container {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 用::ng-deep穿透到子组件内部 */
::ng-deep .parent-container .child-content {
  color: #ff4081;
  font-weight: 600;
  font-size: 16px;
}

父组件模板：

<div class="parent-container">
  <child></child>
</div>

子组件模板（child.component.html）：

<div class="child-content">我是子组件里的内容，会应用父组件定义的样式</div>

注意：::ng-deep在Angular 5中是完全支持的，虽然后续Angular版本对它的使用有一些提示，但在5.x版本中可以放心使用。

方法2：关闭子组件的样式封装 #

如果你希望子组件完全继承父组件（甚至全局）的样式，可以在子组件的配置里关闭样式封装特性。

示例代码： #

子组件的TS文件（child.component.ts）：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  // 关闭样式封装，让父组件样式可以直接作用到子组件
  encapsulation: ViewEncapsulation.None
})
export class ChildComponent { }

之后父组件里的普通样式就能直接作用到子组件内部了，比如父组件CSS：

.parent-container p {
  line-height: 1.6;
  border-left: 3px solid #2196f3;
  padding-left: 10px;
}

提醒：关闭封装后，子组件的自身样式也会变成全局生效的，可能会和其他组件的样式冲突，所以只在确定不会有样式污染的场景下使用。

方法3：将共用样式放到全局样式文件 #

如果父组件和子组件的样式是需要全局复用的，可以把样式写到项目根目录的styles.css（或styles.scss）里，这样所有组件都能直接使用这些样式。

示例代码： #

全局样式文件styles.css：

.shared-child-style {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  margin: 10px 0;
}

子组件模板直接使用这个类：

<div class="shared-child-style">我是子组件，使用全局定义的共用样式</div>

这个方法适合真正需要全局复用的样式，不适合仅父组件和子组件之间的局部专属样式。

内容的提问来源于stack exchange，提问作者Vijay Ramesh