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.
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