如何在已有Angular应用中自定义Ag-Grid主题？

我最近刚在Angular项目里折腾过Ag-Grid的主题自定义，官方文档确实有点零散，给你整理了一套实操步骤，从基础配置到精细调整都有：

首先确保你已经安装了必要的依赖：

npm install ag-grid-angular ag-grid-styles

然后有两种引入官方ag-theme-material主题的方式：

• 方式一：通过angular.json全局引入
  在项目根目录的angular.json里，找到styles数组，把官方主题CSS放在你的自定义样式之前：

  "styles": [
    "node_modules/ag-grid-styles/src/ag-theme-material/ag-theme-material.css",
    "src/styles.scss"
  ]
  

• 方式二：通过SCSS全局引入
  如果你的项目用SCSS，直接在src/styles.scss里导入主题源文件：

  @import 'ag-grid-styles/src/ag-theme-material/ag-theme-material';
  

Ag-Grid的material主题内置了大量CSS变量，直接覆盖这些变量就能快速调整整体风格，不需要修改源码。在src/styles.scss里添加如下代码：

.ag-theme-material {
  /* 自定义主色调（影响选中状态、排序箭头等） */
  --ag-primary-color: #1976d2;
  /* 表头背景色 */
  --ag-header-background-color: #f5f5f5;
  /* 行hover时的背景色 */
  --ag-row-hover-color: #e3f2fd;
  /* 表格边框颜色 */
  --ag-border-color: #e0e0e0;
  /* 全局文字颜色 */
  --ag-text-color: #333;
  /* 选中行的背景色 */
  --ag-row-selected-background-color: #bbdefb;
}

常用的变量还有--ag-header-text-color（表头文字颜色）、--ag-cell-horizontal-padding（单元格内边距）等，你可以通过浏览器开发者工具查看Ag-Grid元素的样式，找到对应的变量名来修改。

如果CSS变量满足不了你的需求，就直接写CSS选择器覆盖特定组件的样式。比如要调整表头文字大小、单元格内边距：

.ag-theme-material .ag-header-cell-label {
  font-size: 14px;
  font-weight: 600;
}

.ag-theme-material .ag-cell {
  padding: 8px 12px;
}

/* 自定义空数据提示的样式 */
.ag-theme-material .ag-overlay-no-rows-center {
  color: #999;
  font-size: 16px;
}

注意：如果样式不生效，可能是因为Ag-Grid的样式优先级较高，你可以尝试添加!important（尽量少用，实在没办法再用），或者用更具体的选择器（比如加上组件的父类）。

如果项目用SCSS，你可以直接修改Ag-Grid的SCSS变量，这样编译时会直接替换主题里的变量，生成自定义的主题CSS，不需要后续覆盖样式。步骤如下：

1. 在src/styles目录下新建ag-grid-custom-theme.scss文件
2. 在文件里先定义自定义变量，再引入官方主题的SCSS源文件：

// 先定义你的自定义变量
$ag-primary-color: #1976d2;
$ag-header-background-color: #f5f5f5;
$ag-row-hover-color: #e3f2fd;
$ag-border-color: #e0e0e0;

// 引入官方SCSS主题文件
@import 'ag-grid-styles/src/ag-theme-material/ag-theme-material.scss';

3. 在src/styles.scss里导入这个自定义主题文件：

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

最后确保你的Ag-Grid组件上添加了ag-theme-material类，否则自定义样式不会生效：

<ag-grid-angular
  class="ag-theme-material"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  style="height: 500px; width: 100%;"
></ag-grid-angular>

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