Angular 5中模拟视图封装下组件自定义样式不生效问题

这个问题我之前也碰到过，核心原因是Angular的ViewEncapsulation.Emulated机制在搞事情！当你启用这种封装模式时，Angular会自动给组件内的所有DOM元素添加一个独特的属性（比如_ngcontent-abc123），同时给组件样式表中的每条规则加上这个属性选择器，确保样式只会作用于当前组件内的元素。但PrimeNG的很多控件（比如你用的p-checkbox）会渲染出一些不在当前组件封装范围内的DOM元素（比如.ui-chkbox是PrimeNG组件内部生成的，它没有那个独特的属性），所以你的样式规则根本匹配不到它们。

下面给你几种可行的解决方案，按推荐优先级排序：

1. 最推荐：使用:host ::ng-deep穿透封装 #

::ng-deep可以让你的样式穿透组件封装，作用到子组件或外部渲染的元素；而:host则限定这些样式只在当前组件的宿主元素范围内生效，避免污染全局样式。

修改你的组件样式文件如下：

/* 穿透封装，仅作用于当前组件内的th元素 */
:host ::ng-deep th {
  background-color: olive;
}

/* 穿透封装，作用于当前组件内的PrimeNG checkbox元素 */
:host ::ng-deep .ui-chkbox {
  background-color: aqua;
  height: 2.5rem;
}

这里可以去掉!important，因为:host ::ng-deep已经足够提升选择器优先级，如果还是不生效再考虑添加。

2. 备选：将样式放到全局样式文件 #

如果你不想使用::ng-deep，可以把样式写在项目根目录的styles.css（或其他全局样式文件）里，但一定要给规则加上组件的类名前缀，避免影响其他页面的控件：

首先给组件的根元素添加一个唯一类名：

<!-- 组件模板根元素 -->
<div class="app-custom-checkbox-component">
  <!-- 你的PrimeNG控件和表格代码 -->
  <p-checkbox></p-checkbox>
  <table>...</table>
</div>

然后在全局样式文件中编写规则：

.app-custom-checkbox-component th {
  background-color: olive;
}

.app-custom-checkbox-component .ui-chkbox {
  background-color: aqua;
  height: 2.5rem;
}

3. 不推荐：关闭组件的ViewEncapsulation #

把组件的封装模式设置为ViewEncapsulation.None，这样组件内的样式会变成全局样式，很容易和其他组件的样式冲突，除非你非常确定不会有样式污染，否则不建议使用：

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

@Component({
  selector: 'app-custom-checkbox',
  templateUrl: './custom-checkbox.component.html',
  styleUrls: ['./custom-checkbox.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CustomCheckboxComponent { }

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