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