ag-Grid header styles not changing with CSS on component

Question

I'm using ag-Grid on my application and I have it ruining fine with the default theme (ag-theme-balham).

On one specific component I want to change the header background color, but when I add the CSS on my component.scss file nothing happens.

I added the ag-Grid css on my angular-cli.json file

  "styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-balham.css",
    "styles.scss"
  ],

On component.scss file I have the following CSS

.ag-theme-balham .ag-header {
    background-color: #e0e0e0;
}

But nothing happens, and the color does not get applied to the header.

Solution 1

Override the header-cell class instead

.ag-theme-balham .ag-header-cell{
    background-color: #e0e0e0;
}

and if you have header-group then

.ag-theme-balham .ag-header-cell, .ag-theme-balham .ag-header-group-cell{
    background-color: #e0e0e0;
}

Solution 2

Try using ::ng-deep combinator

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

::ng-deep .ag-theme-balham .ag-header {
    background-color: #e0e0e0;
}

If that does not work, put your css in the global stylesheet and check if the styles are overriden correctly

Solution 3

A bit of an old question this is but to anyone coming into it now, this solution worked for me. The tags you need to write in are :

::ng-deep .ag-theme-balham .ag-header-cell-label{
/* your css here*/}

also the tag !important could also work