ag-Grid header styles not changing with CSS on component

Ennio picture Ennio · Mar 14, 2018 · Viewed 10.1k times · Source

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.

Answer

David picture David · Mar 14, 2018

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