Angular中父组件为引入的is-filter子组件设置自定义样式不生效如何解决

核心是Angular默认的**样式视图封装（ViewEncapsulation）**机制导致的：Angular会为每个组件的DOM元素自动添加唯一的属性标识（如_ngcontent-xxx），组件内的样式会自动拼接该属性选择器，默认状态下父组件的样式无法穿透作用到子组件内部的DOM元素。你在父组件定义的.bgWhite仅能作用到<is-filter>根节点本身，无法命中子组件内部的.card-footer元素，所以背景样式不生效。
另外注意你filter.component.scss里的样式少了类选择器的.，正确写法应该是.card-footer，否则原始默认样式也不会生效。

• 方案1：使用::ng-deep穿透样式封装（最便捷，适合临时修改）
  在父组件的app.component.scss中修改写法，配合:host避免样式全局污染：

:host ::ng-deep .bgWhite .card-footer {
  background-color: #fff !important;
}

说明：::ng-deep会移除样式的属性限制，:host限定该穿透样式仅在当前父组件范围内生效，不会污染其他页面的同类型组件。

• 方案2：修改子组件的视图封装规则
  在filter.component.ts的组件配置中关闭样式封装：

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

@Component({
  selector: 'is-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭样式封装
})

说明：关闭后子组件的样式会变为全局样式，你在父组件定义的.bgWhite .card-footer可以直接命中，但要注意子组件的类名不要和全局类名冲突。

• 方案3：子组件开放自定义样式输入接口（最规范，适合复用组件）
  在filter.component.ts中新增自定义类输入参数：

@Input() customContainerClass: string = '';

修改子组件模板，动态绑定类：

<div class="card-footer pt-0 pb-3 filter-container" id="filter" [ngClass]="customContainerClass">
  ...
</div>

父组件调用时传参即可：

<is-filter customContainerClass="bgWhite" [type]="'verdicts'" [filterObj]="filterObj" (onFilter)="filter($event)"></is-filter>

同时把.bgWhite的样式定义放到filter.component.scss中即可，无需穿透也不会有全局污染问题。

• 方案4：把样式写到全局样式文件
  在项目全局的styles.scss中添加样式：

.bgWhite .card-footer {
  background-color: #fff !important;
}

说明：全局样式不受组件封装限制，可以直接命中所有对应元素，适合全局通用的样式修改。

内容的提问来源于stack exchange，提问作者David Angarita