Angular 5如何局部覆写ngx-datatable CSS且不影响其他组件

我完全理解你遇到的这个痛点——关闭ViewEncapsulation.None虽然能快速覆写第三方样式，但全局样式污染的问题确实头疼，尤其是其他组件也在用ngx-datatable的时候，导航后样式残留的问题更是让人烦躁。

不用关闭组件封装，我们可以用Angular提供的深度选择器来实现仅当前组件内的样式覆写，完美解决这个问题，具体步骤如下：

1. 修改组件SCSS代码 #

保留你的样式规则，但用:host ::ng-deep包裹，确保样式只作用于当前组件内部的ngx-datatable元素：

:host ::ng-deep .datatable-body-cell {
  padding: 0 !important;
}

:host ::ng-deep .datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

2. 恢复组件的ViewEncapsulation设置 #

在你的calendar.component.ts中，移除encapsulation: ViewEncapsulation.None配置，让组件保持默认的Emulated封装模式——这是Angular组件的默认行为，能确保组件样式只作用于自身：

@Component({
  templateUrl: "./calendar.component.html",
  styleUrls: "./calendar.component.scss",
  // 删掉这一行，恢复默认封装
  // encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

为什么这个方案能解决问题？ #

• :host：代表当前组件的宿主元素，相当于给你的样式加了一个“作用域前缀”，确保样式只在当前组件范围内生效
• ::ng-deep：穿透Angular的组件样式封装屏障，让你的样式能够作用到组件内部的第三方子组件（也就是ngx-datatable的各个单元格元素）
• 这样组合起来，你的样式只会被应用到当前组件内的ngx-datatable，不会污染全局样式或者其他组件的同类型元素

额外的替代方案（无需使用::ng-deep） #

如果你对::ng-deep的deprecated标记有所顾虑，也可以用“自定义类+宿主选择器”的方式：

首先在模板中给你的ngx-datatable添加一个专属类：

<ngx-datatable class="calendar-specific-datatable">
  <!-- 表格内容 -->
</ngx-datatable>

然后在SCSS中通过宿主选择器限定样式范围：

:host .calendar-specific-datatable .datatable-body-cell {
  padding: 0 !important;
}

:host .calendar-specific-datatable .datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

这种方式不需要依赖::ng-deep，同样能实现仅当前组件生效的样式覆写，适合对兼容性要求更高的场景。

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