如何将ngx-datatable表头背景颜色设置为蓝色？

开发者阿泽

2026-6-27

解决ngx-datatable表头背景设置为蓝色的问题

针对你遇到的问题，以下几种方法可以有效设置表头背景色：

方法1：使用全局样式文件

直接在项目的全局样式文件（如styles.scss或styles.css）中添加以下样式，这种方式不受组件样式隔离的限制：

.datatable-header {
  background-color: #165DFF !important; /* 替换为你需要的蓝色值 */
}

/* 若需单独设置每个表头单元格的背景 */
.datatable-header-cell {
  background-color: #165DFF !important;
  color: white; /* 可选：设置文字颜色为白色，提升可读性 */
}

方法2：在组件内使用::ng-deep（限定作用域）

如果你希望样式仅作用于当前组件内的表格，可在组件样式文件中用::ng-deep结合:host穿透样式隔离，同时避免污染全局样式：

:host ::ng-deep .material .datatable-header {
  background-color: #165DFF;
}

:host ::ng-deep .material .datatable-header-cell {
  background-color: #165DFF;
  color: white;
}

注意：/deep/已被废弃，推荐使用::ng-deep；添加.material类是为了精准匹配你表格的类名，提升样式优先级。

方法3：自定义表头模板

如果上述方法仍不生效，可通过自定义表头模板直接设置样式：
在HTML代码中为列添加表头模板：

<ngx-datatable-column name="ID RECLAMO" prop="idReclamo">
  <ng-template ngx-datatable-header-template let-sort="sortFn">
    <div style="background-color: #165DFF; color: white; padding: 10px;">ID RECLAMO</div>
  </ng-template>
</ngx-datatable-column>

这种方式可精准控制单列表头样式，也可封装成通用模板复用。