Grid Styling – Overwrite style of ag-grid


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?


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?


You should use ViewEncapsulation

Just add to your component encapsulation: ViewEncapsulation.None:

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

    selector: '....',
    templateUrl: '....',
    styles: [`
        .ag-theme-fresh .ag-row-selected {
            background-color: #1428df !important;
    encapsulation: ViewEncapsulation.None

Answered By – un.spike

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published