Why is ag-theme-balham the only ag-grid theme that works?

Question

I added ag-grid to my Angular project. Then I imported its CSS into styles.css.

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

So far, so good. The ag-theme-balham theme shows up when I run the app.

However, now I want to change the theme. But no matter which other theme's CSS I choose, no styling shows up. Even ag-theme-balham-dark doesn't work.

Verified:

The other themes' CSS files exist in node_modules.
The Angular project compiles.
There are no errors in the console.

Eric Eskildsen Eric Eskildsen · Accepted Answer · 2019-12-03T16:57:10

ag-grid-angular has a class attribute that you have to update as well:

<ag-grid-angular 
    *ngIf="rowData"
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"    <!-- Update this -->
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    [modules]="modules">
</ag-grid-angular>

Why is ag-theme-balham the only ag-grid theme that works?

2 Answers