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

Answer 1

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

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.

Answer 2

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

Answer 3

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