Angular 14集成ag-grid Community v30时CSS样式失效问题

问题场景 #

在Angular 14项目中集成AG Grid Community v30，尝试通过styles.css、angular.json、index.html三种方式引入样式后，表格样式仍未正常加载，效果如下：

已尝试的配置：

• styles.css 导入：

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

• angular.json 全局样式配置：

"node_modules/ag-grid-community/dist/styles/ag-grid.css",
"node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css",  

• 组件HTML代码：

<ag-grid-angular style="width: 800px; height: 350px;" class="ag-theme-alpine" [rowData]="rowData"
                 [columnDefs]="columnDefs">
</ag-grid-angular>

• 组件TS代码：

columnDefs: ColDef[] = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
];

rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
];

排查与解决步骤 #

1. 统一主题，避免样式冲突 #

你同时引入了ag-theme-balham.css和ag-theme-alpine.css两个主题文件，会导致样式规则互相覆盖。选择其中一个主题保持全局一致：

• 如果使用ag-theme-alpine，删除styles.css中关于balham的导入语句。

2. 修正Angular 14的@import路径写法 #

Angular 14+ 不再支持~符号指向node_modules，直接使用包名路径即可：
修改styles.css的导入代码：

@import "ag-grid-community/dist/styles/ag-grid.css";
@import "ag-grid-community/dist/styles/ag-theme-alpine.css";

3. 避免重复引入样式 #

不要同时在styles.css和angular.json中重复导入相同的AG Grid样式文件，二选一即可：

• 若选择angular.json配置，确保路径正确且仅保留一套主题配置：

"styles": [
  "src/styles.css",
  "ag-grid-community/dist/styles/ag-grid.css",
  "ag-grid-community/dist/styles/ag-theme-alpine.css"
],

4. 确认模块导入正确 #

确保使用ag-grid-angular的组件所在模块已导入AgGridModule：

import { NgModule } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { YourComponent } from './your.component';

@NgModule({
  declarations: [YourComponent],
  imports: [
    AgGridModule.withComponents([])
  ]
})
export class YourModule { }

5. 清理缓存并重启项目 #

Angular缓存可能导致样式未更新，执行以下命令重置后重启：

ng cache clean
ng serve --open

验证要点 #

• 打开浏览器开发者工具的Elements面板，确认ag-grid-angular元素上的ag-theme-alpine类已正确挂载。
• 在Styles面板检查AG Grid的CSS规则是否被正常加载，无被覆盖或未生效的情况。

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