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.