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，因为在角度组件中定义的样式不能覆盖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-grid的样式

3 个答案: