Angular-Tree-Grid表头与行自定义CSS样式实现方法咨询

由于Angular默认的样式封装机制，直接在组件CSS中写样式无法穿透到db-angular-tree-grid内部的DOM元素，我们可以通过:host ::ng-deep（限定样式仅作用于当前组件内的树形表格）来实现自定义样式，以下是针对你需求的具体实现：

1. 修改表头字体及样式 #

在tree-grid.component.css中添加以下代码，自定义表头的字体、背景色、内边距等：

/* 穿透到树形表格的表头单元格 */
:host ::ng-deep .db-angular-tree-grid th {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2c3e50;
  background-color: #f8f9fa;
  text-align: left;
  padding: 12px 8px;
  border-bottom: 2px solid #dee2e6;
}

2. 为表格行添加背景色 #

包括默认行样式、奇偶行区分、鼠标hover状态的样式：

/* 所有表格行的基础样式 */
:host ::ng-deep .db-angular-tree-grid tr {
  background-color: #ffffff;
  transition: background-color 0.2s ease;
}

/* 奇偶行差异化背景色 */
:host ::ng-deep .db-angular-tree-grid tr:nth-child(even) {
  background-color: #f5f7fa;
}

/* 鼠标hover行时的背景色 */
:host ::ng-deep .db-angular-tree-grid tr:hover {
  background-color: #e8f4f8;
}

/* 子节点行缩进（增强层级视觉效果，可选） */
:host ::ng-deep .db-angular-tree-grid .child-row td {
  padding-left: 24px;
}

3. 自定义单元格样式（可选） #

如果需要调整单元格的字体、边框等细节：

:host ::ng-deep .db-angular-tree-grid td {
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  color: #34495e;
  padding: 10px 8px;
  border-bottom: 1px solid #e0e0e0;
}

替代方案：关闭样式封装 #

如果::ng-deep在你的Angular版本中被标记为过时，可以通过修改组件的样式封装策略实现：
在组件的@Component装饰器中添加：

encapsulation: ViewEncapsulation.None

这种方式下需要用父容器类名限定样式范围，避免污染全局样式：

.container .db-angular-tree-grid th {
  /* 表头样式代码 */
}
.container .db-angular-tree-grid tr {
  /* 行样式代码 */
}

你的组件代码参考：

TreeGridComponent.html

<div class="container">
  <db-angular-tree-grid
    #angularGrid 
    [data]="data" 
    [configs]="configs"
  >
  </db-angular-tree-grid>
</div>

TreeGridComponent.ts

import { Component, ViewChild } from '@angular/core';
import { AngularTreeGridComponent } from 'angular-tree-grid';

@Component({
  selector: 'app-tree-grid',
  templateUrl: './tree-grid.component.html',
  styleUrls: ['./tree-grid.component.css']
})
export class TreeGridComponent {
  @ViewChild('angularGrid') angularGrid!: AngularTreeGridComponent;
  data: any = [
    {
      id: 1,
      name: 'Gross Sales',
      age: 60,
      weight: 60,
      gender: 1,
      parent: 0,
    },
    {
      id: 2,
      name: 'Gross Units',
      age: 40,
      weight: 95,
      gender: 1,
      parent: 1,
    },
    {
      id: 3,
      name: 'Gross Sales Dollars',
      age: 36,
      weight: 105,
      gender: 1,
      parent: 0,
    },
  ];
  // Define the columns for the tree grid
  configs:any = {
    id_field: 'id',
    parent_id_field: 'parent',
    parent_display_field: 'name',
    columns: [
      {
        name: 'name',
        header: 'Name',
        width: '100px',
      },
      {
        name: 'age',
        header: 'July 2020',
      },
      {
        name: 'weight',
        header: 'July 2020',
      },
      {
        name: 'gender',
        header: 'September 2020',
      },
    ],
  };
}

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