網格樣式 - 覆蓋 ag-grid 的樣式

Question

我有以下風格：

.ag-theme-fresh .ag-row-selected {
    background-color: #bde2e5; 
}`

它來自一個主題的 css 樣式文件。 但我想用這種風格覆蓋它：

.ag-theme-fresh .ag-row-even .ag-row-selected {
  background-color: #1428df;
}

但它沒有效果，我的組件使用第一種樣式。 如何覆蓋第一個樣式 1？ 我試過!important但它什么也沒做。

我應該在 css 文件的開頭定義我的自定義樣式嗎？

更新：

我發現我可以使用函數 gridOptions.getRowClass 來設置要使用的樣式類。 但我想解決中心問題（對於我在應用程序中使用的所有角網格）。 任何的想法？

Answer 1

你應該使用ViewEncapsulation

只需添加到您的組件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

要覆蓋 ag-grid 使用，您需要使用 ng-deep 作為 angular 組件中定義的樣式不要覆蓋 ag-grid css

:host ::ng-deep .ag-header-cell-label {
  justify-content: center;
}

如果您使用 sass 或 scss，您可以在 style.scss/sass 中覆蓋。 這將適用於所有地方

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

如果您需要在特定網格上進行操作，請更喜歡自定義類並為 ag-grid 創建子類。

Answer 3

您還可以全局應用樣式，如果這樣做，它將覆蓋所有 ag-Grid 組件的樣式。 如果您嘗試單獨設置組件的樣式，這可能不是一個選項，但這是提供全局基本樣式覆蓋的好方法。

此外，您應該嘗試使用更具體的選擇器，而不是使用重要的。

下面是一個例子：

.ag-theme-alpine > .ag-row.ag-row-selected {
  background : red;
}