CODEWITHSUNDEEP
cssangularag-grid
user9923760
user9923760

Reputation: 656

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?

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?

Upvotes: 10

Views: 16545

Answers (4)

danday74
danday74

Reputation: 57016

for quartz theme its a little different, since that theme applies opacity and this is how to avoid it:

.ag-theme-quartz-dark {
  $agActiveColor: #1F2936;
  --ag-active-color: $agActiveColor;
  --ag-active-color-dark: #{darken($agActiveColor, 2)};
  --ag-active-color-darker: #{darken($agActiveColor, 4)};

  .ag-row {
    cursor: pointer;

    &.ag-row-hover:not(.ag-row-selected) {
      background-color: var(--ag-active-color-dark);
    }

    &.ag-row-hover.ag-row-selected {
    }

    &.ag-row-selected {
      background-color: var(--ag-active-color-darker);
    }
  }
}

Upvotes: 0

Prateek
Prateek

Reputation: 154

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

update : this will make the style global. By changing the encapsulation set as none (ViewEncapsulation.None) at component will make style global as well.

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.

Upvotes: 4

Bob
Bob

Reputation: 570

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

Upvotes: 0

un.spike
un.spike

Reputation: 5113

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

Upvotes: 9

Related Questions