css - Grid Styling - Overwrite style of ag-grid

Question

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?

Answer 1

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