如何在Angular版Kendo Grid的网格层级统一应用列样式

方案1：CSS样式覆盖（推荐，适配性最高） #

这是实现成本最低的方式，可按需选择单组件生效或全项目生效：

单组件内生效 #

在对应组件的样式文件中添加如下代码：

/* 给目标kendo-grid添加custom-grid类即可生效，避免污染其他不需要该样式的网格 */
::ng-deep .custom-grid .k-grid-header th,
::ng-deep .custom-grid .k-grid td {
  border-color: #000 !important;
  /* 还可按需扩展边框配置，比如：
  border-width: 1px;
  border-style: solid;
  */
}

使用时给网格标签加对应类名即可，不需要修改任何列的配置：

<kendo-grid class="custom-grid" ...>
  <!-- 原有列配置保持不变 -->
</kendo-grid>

全项目所有网格生效 #

直接在项目全局样式文件（通常为src/styles.scss或src/styles.css）中添加如下代码即可，不需要修改任何网格相关的业务代码：

.k-grid-header th,
.k-grid td {
  border-color: #000 !important;
}

方案2：Kendo原生全局列配置 #

如果不想使用CSS覆盖的方式，可以通过Kendo Grid提供的全局列配置注入实现：
在根模块（AppModule）或者共享Grid模块中注入COLUMN_OPTIONS配置：

import { NgModule } from '@angular/core';
import { GridModule, COLUMN_OPTIONS } from '@progress/kendo-angular-grid';

@NgModule({
  imports: [GridModule],
  providers: [
    {
      provide: COLUMN_OPTIONS,
      useValue: {
        // 全局统一配置表头边框
        headerStyle: { 'border-color': '#000' },
        // 如果需要单元格也同步配置边框，加上下面这行
        cellStyle: { 'border-color': '#000' }
      }
    }
  ]
})
export class AppModule { }

配置完成后所有kendo-grid-column都会自动继承该样式，无需逐列添加配置。

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