8

I have the following style:

.ag-theme-fresh .ag-row-selected {
    background-color: #bde2e5; 
}`

It comes from a css style file of a theme. But I want to overwrite it with this style:

.ag-theme-fresh .ag-row-even .ag-row-selected {
  background-color: #1428df;
}

But it has not effect and my component uses the first style. How can I overwrite the first style 1? I tried with !important but it does nothing.

Should I define my custom style at the beginning of the css file?

UPDATE:

I found I can use the function gridOptions.getRowClass to set the style class to be used. But I would like to solve the issue central (for all the angular grids that I use in my application). Any idea?

un.spike
  • 4,857
  • 2
  • 18
  • 38
user9923760
  • 596
  • 2
  • 8
  • 18

3 Answers3

8

You should use ViewEncapsulation

Just add to your component encapsulation: ViewEncapsulation.None:

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
    selector: '....',
    templateUrl: '....',
    styles: [`
        .ag-theme-fresh .ag-row-selected {
            background-color: #1428df !important;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
un.spike
  • 4,857
  • 2
  • 18
  • 38
  • 5
    This makes this style global, so if you want to keep some sort of encapsulation then make sure to wrap the style with the component name app-my-component {...} – mosesfetters Oct 13 '18 at 13:43
  • I am trying to keep some encapsulation to the component, but your suggestion doesn't work for me. ```styles: [`app-my-component {.ag-theme-fresh .ag-row-selected { background-color: #1428df !important; }}`] ``` (where `app-my-component` is my own component name, and `.ag-theme-fresh` the actual theme used). Is this not what you meant with "wrap"? – Superman.Lopez May 24 '19 at 13:21
3

To override the ag-grid use you need to use ng-deep as the style defined in angular component do not overide ag-grid css

:host ::ng-deep .ag-header-cell-label {
  justify-content: center;
}

update : this will make the style global. By changing the encapsulation set as none (ViewEncapsulation.None) at component will make style global as well.

if you are using sass or scss you could override in the style.scss/sass. this would be applicable at all places

@import "../node_modules/ag-grid-enterprise/dist/styles/ag-grid.scss";
@import "../node_modules/ag-grid-enterprise/dist/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";

.ag-theme-alpine {
  @include ag-theme-alpine(
    (
      // use theme parameters where possible
        alpine-active-color: #c066b2,
    )
  );
    .ag-header-cell-label {
        justify-content: center;
      }
    }

if you have need of doing at a specific grid, prefer custom class and make sub-class for the ag-grid.

Prateek
  • 144
  • 3
  • 14
  • This is less preferable and little different from turning off ViewEncapsulation as outlined in the accepted answer. ng::deep is deprecated, and it has the effect of making the styles global. Per the docs: ` disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style.` – Cuga Nov 19 '21 at 15:55
  • @Cuga - yup! i do not recommend either thus recommend using sass version. I believe global at one global place better. – Prateek Jun 12 '22 at 06:06
0

You can also apply the styles globally and if you do so it will override the styles for all your ag-Grid components. This might not be an option if you are trying to style the components individually, but it's a good way to give a global base style override.

Also, you should try to use more specific selectors instead of using important.

Here is an example:

.ag-theme-alpine > .ag-row.ag-row-selected {
  background : red;
}
Bob
  • 532
  • 5
  • 14