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.

David · Accepted Answer · 2018-03-14 15:49:58Z

7

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

answered Mar 14, 2018 at 15:49

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

koolhuman · Accepted Answer · 2018-03-14 20:07:16Z

4

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

answered Mar 14, 2018 at 20:07

koolhuman

1,64918 silver badges25 bronze badges

Comments

Faris Kapo · Accepted Answer · 2019-08-13 18:30:10Z

1

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

answered Aug 13, 2019 at 18:30

Faris Kapo

37611 silver badges33 bronze badges

Comments

MartenCatcher · Accepted Answer · 2020-02-18 07:23:11Z

0

Override background-color with !important.

That is:

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

edited Feb 18, 2020 at 7:23

MartenCatcher

2,8958 gold badges29 silver badges41 bronze badges

answered Feb 18, 2020 at 6:53

subrat22

112 bronze badges

Collectives™ on Stack Overflow

ag-Grid header styles not changing with CSS on component

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related