网格样式 - 覆盖 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
})

Answer 2

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