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

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.

ag-grid ag-grid-angular

Solution 1:^[1]

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>

Solution 2:^[2]

Certain themes are available only in the updated version of ag-grid. You may want to check the availability with respect to the version that you are using.

For more information:

https://www.ag-grid.com/javascript-grid-themes-provided/

https://www.ag-grid.com/javascript-grid-themes-v23-migration/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Eric Eskildsen
Solution 2

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]