ag-grid-angular无AgGridThemeOverrideService，求自定义主题解决方案

问题原因 #

AgGridThemeOverrideService并非AG Grid Angular官方提供的稳定API，属于过时文档或第三方非官方示例中的内容，当前版本的AG Grid Angular已移除或未包含该服务，因此会出现导出成员不存在的错误。

官方推荐的自定义主题方案 #

1. 使用CSS自定义属性（推荐，支持动态修改） #

这是AG Grid官方最推荐的主题自定义方式，通过覆盖内置CSS变量实现，支持静态配置和动态修改。

静态配置（组件内）

基于官方基础主题（如ag-theme-alpine）叠加自定义类，直接在组件样式中覆盖变量：

import { Component } from '@angular/core';
import 'ag-grid-enterprise';

@Component({
  selector: 'app-root',
  template: `
    <ag-grid-angular
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      class="ag-theme-alpine ag-theme-custom"
    ></ag-grid-angular>
  `,
  styles: [
    `
      .ag-theme-custom {
        --ag-accent-color: #ff0000;
        --ag-border-color: #0000ff;
        --ag-header-background-color: #f0f0f0;
        /* 更多可覆盖变量参考AG Grid官方主题变量列表 */
      }
    `
  ]
})
export class AppComponent {
  rowData = [];
  columnDefs = [];
}

动态修改（响应用户输入）

通过DOM操作动态修改CSS变量，实现根据用户输入的颜色实时更新主题：

import { Component, ElementRef, ViewChild } from '@angular/core';
import 'ag-grid-enterprise';

@Component({
  selector: 'app-root',
  template: `
    <input type="color" [(ngModel)]="accentColor" (change)="updateGridTheme()">
    <ag-grid-angular
      #gridRef
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      class="ag-theme-alpine"
    ></ag-grid-angular>
  `
})
export class AppComponent {
  rowData = [];
  columnDefs = [];
  accentColor = '#ff0000';
  @ViewChild('gridRef') gridElement!: ElementRef;

  updateGridTheme() {
    const gridDom = this.gridElement.nativeElement;
    gridDom.style.setProperty('--ag-accent-color', this.accentColor);
    // 可同时修改多个变量，比如：
    // gridDom.style.setProperty('--ag-border-color', this.userBorderColor);
  }
}

2. 自定义SCSS主题（适合全局统一配置） #

如果需要全局统一的自定义主题，可通过SCSS变量编译生成专属主题：

1. 创建自定义SCSS文件（如ag-custom-theme.scss）：

// 导入AG Grid基础主题样式
@import 'ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine';

// 覆盖内置SCSS变量
$ag-accent-color: #ff0000;
$ag-border-color: #0000ff;
$ag-header-background-color: #f0f0f0;

// 生成自定义主题类
.ag-theme-custom {
  @include ag-theme-alpine();
}

2. 在Angular全局样式文件styles.scss中导入该文件：

@import './ag-custom-theme.scss';

3. 在组件中使用自定义主题类：

<ag-grid-angular
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  class="ag-theme-custom"
></ag-grid-angular>

3. 通过GridOptions.theme参数（部分版本支持） #

部分AG Grid版本支持通过GridOptions的theme属性传递自定义变量，变量命名需对应官方文档：

import { Component } from '@angular/core';
import 'ag-grid-enterprise';

@Component({
  selector: 'app-root',
  template: `
    <ag-grid-angular
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      [gridOptions]="gridOptions"
      class="ag-theme-alpine"
    ></ag-grid-angular>
  `
})
export class AppComponent {
  rowData = [];
  columnDefs = [];
  gridOptions = {
    theme: {
      variables: {
        accentColor: 'green',
        borderColor: 'yellow'
      }
    }
  };
}

总结 #

直接弃用不存在的AgGridThemeOverrideService，优先选择CSS自定义属性方案，该方案灵活度高，支持静态和动态修改，完全符合AG Grid官方当前的主题自定义规范。

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