AG Grid custom CSS


I am studying the viability of migrating from datatable to ag grid.

With regards to theme customisation, rather than creating a theme from scratch, which seems to be working, I wanted to modify an existing theme.

For instance, I am working with ag-theme-balham.

My code:

dag.AgGrid(id='full-table', className='ag-theme-balham ag-theme-orange',

My ag-grid.css:

.ag-theme-orange {
  --ag-header-background-color: #ff8c00;
  --ag-header-foreground-color: white;

This works when I modify and save the css file. However, if I reload the app, it reverts back to the default style.

Any ideas?



Hello @edmoman,

You need to do both classes on the style sheet. {
  --ag-header-background-color: #ff8c00;
  --ag-header-foreground-color: white;

The issue is due to how the style sheets are imported. The last get priority.

So, the custom style sheet loads first. Then the component loads the style sheets.


Brilliant! Thanks!