网格样式 - 覆盖 ag-grid 的样式答案

【问题标题】：Grid Styling - Overwrite style of ag-grid网格样式 - 覆盖 ag-grid 的样式
【发布时间】：2019-03-10 23:04:09
【问题描述】：

我有以下风格：

.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 来设置要使用的样式类。但我想解决中心问题（对于我在应用程序中使用的所有角度网格）。有什么想法吗？

【问题讨论】：

标签： css angular ag-grid

【解决方案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
})

【讨论】：

这使得这个样式是全局的，所以如果你想保持某种封装，那么确保用组件名 app-my-component {...} 包装样式
我正在尝试对组件进行一些封装，但您的建议对我不起作用。 styles: [`app-my-component {.ag-theme-fresh .ag-row-selected { background-color: #1428df !important; }}`] （其中app-my-component 是我自己的组件名称，.ag-theme-fresh 是实际使用的主题）。这不是你所说的“包装”吗？

【解决方案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 创建子类。

【讨论】：

这不太可取，与在接受的答案中概述的关闭 ViewEncapsulation 几乎没有什么不同。 ng::deep 已被弃用，它具有使样式全局化的效果。根据文档：`禁用该规则的视图封装。应用 ::ng-deep 的任何样式都将成为全局样式。`

【解决方案3】：

您还可以全局应用样式，如果这样做，它将覆盖所有 ag-Grid 组件的样式。如果您尝试单独设置组件的样式，这可能不是一个选项，但它是提供全局基本样式覆盖的好方法。

此外，您应该尝试使用更具体的选择器，而不是使用重要的选择器。

这是一个例子：

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

【讨论】：