CODEWITHSUNDEEP
angularag-gridag-grid-ng2
Ennio
Ennio

Reputation: 1157

ag-Grid header styles not changing with CSS on component

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.

Upvotes: 6

Views: 16340

Answers (4)

subrat22
subrat22

Reputation: 11

Override background-color with !important.

That is:

:host {
    ::ng-deep { background-color: }

Upvotes: 0

Faris Kapo
Faris Kapo

Reputation: 366

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

Upvotes: 1

koolhuman
koolhuman

Reputation: 1651

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;
}

Upvotes: 4

David
David

Reputation: 34435

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

Upvotes: 7

Related Questions