自定义 Ag-Grid 主题的问题答案

【问题标题】：Issues Customizing the Ag-Grid Themes自定义 Ag-Grid 主题的问题
【发布时间】：2018-08-17 10:06:10
【问题描述】：

如何在现有 Angular 应用程序中自定义 Ag-Grid 主题（例如 ag-theme-material.css）？

缺少他们提供的documentation，因为它没有解释如何执行这些更改/配置。

任何帮助将不胜感激。

【问题讨论】：

你看到这个例子了吗 - github.com/ag-grid/ag-grid-customise-theme？您需要更改 .scss 文件中的 Saas 变量，然后将此文件导入组件中。
@koolhuman 我看过了，但是这个.scss文件，这个去哪了？最初，我以为这是angular中的styles.scss文件。
.scss 文件将作为您定义了 ag-grid 的 component.ts 文件中的导入语句。导入'./myStyles.scss';
让我明白这一点，如果我需要覆盖 Ag-Grid 中的样式，只能在嵌套的组件级别完成？
查看此链接 - stackblitz.com/edit/github-djhzqb?file=src%2Fstyles.scss。我修改了您的代码并在您的 component.ts 中导入了 styles.scss 文件，现在一切正常。

【解决方案1】：

添加 ag-grid-overrides.scss 文件并放置您要为 ag-grid 主题修改的 saas 变量。可以在此链接中找到可用的 sass 变量的完整列表 - https://github.com/ag-grid/ag-grid/tree/master/src/styles。在您的 component.ts 文件中导入 ag-grid-overrides.scss。您仍然可以为每个组件拥有自己的 .css 文件，如下所示的 app.component.css 文件。

app.component.ts

import '../ag-grid-overrides.scss';

app.component.html

<ag-grid-angular class="data-grid ag-theme-fresh" [gridOptions]="gridOptions">
</ag-grid-angular>

ag-grid-overrides.scss

// Customize the look and feel of the grid with Sass variables
// Up-to-date list of variables is available in the source code: https://github.com/ag-grid/ag-grid/blob/latest/src/styles/theme-fresh.scss 
$icons-path: "~ag-grid/src/styles/icons/";

// changes the border color
$border-color: #FF0000;

// Changes the font size
$font-size: 14px;

// Changes the font family
//$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

// Reverts the cell horizontal padding change between ag-fresh and ag-theme-fresh
//$cell-horizontal-padding: 2px;

// changes the icon color
// $icon-color: red;
//$primary-color: green;

@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-fresh.scss';

app.component.css（不需要，因为这是 ag-grid-angular 上的自定义类）

.data-grid {
  width: 500px; height: 300px; margin-bottom: 1rem;
}

angular-cli.json

"styles": [
        "../node_modules/ag-grid/dist/styles/ag-grid.css",
        "../node_modules/ag-grid/dist/styles/ag-theme-fresh.css",
        "styles.scss",
        "ag-grid-overrides.scss"
      ]

【讨论】：

请确保您不会像我刚才那样从 dist 目录而不是 src 目录 @importing 浪费大量时间 :)
如果您想使用像素，这很好。目前正在经历一个痛苦的世界，让我的自定义 vars 文件使用 rem。
我怎样才能为 Vanilla JS 应用程序做到这一点？我正在尝试自定义主题，但是以后如何将该类附加到 HTML id 上？

【解决方案2】：

在我的例子中，它使用 "ag-grid-enterprise": "^23.1.0" 和 "ag-grid-community": "^23.1.0" 并且要为 angular2+ 应用程序创建自定义主题，您应该从 ag-grid-community 包中导入几个混合文件到全局样式文件（scss 用于我的情况），它看起来像这样：

@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-base/sass/ag-theme-base';

那么你应该包含带有参数集的基本主题，你可以覆盖这个默认主题：

.ag-theme-base {//should have specific name, since sizes doesn't work with custom name
  @include ag-theme-base(
    (
      foreground-color: black,
      background-color: yellow,
    )// this is parameters set object where you can ovveride ag-grid properties 
  );
}

你可以找到的ag-grid参数列表link

此外，您可以提取此参数并应用于其他元素（不确定这是一个有用的选项，但 ag-grid 允许这样做）

.ag-header-cell {
  background-color: ag-param(foreground-color);
  color: ag-param(background-color);
}

链接到有关 ag-param 函数 link 的文档。链接到有关主题定制的文档link。

angular中的使用示例：

<ag-grid-angular
  style="width: 100%; height: 400px;"
  class="ag-theme-base"
  ...
>
</ag-grid-angular>

【讨论】：