Question

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

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

非常感谢任何帮助。

Answer 1

添加ag-grid-overrides.scss文件并将要修改的saas变量放入ag-grid主题。可以在此链接中找到可用的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-网格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;
}

角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"
      ]

Answer 2

在我的情况下，使用“ ag-grid-enterprise”：“ ^ 23.1.0” 和“ ag-grid-community”：“ ^ 23.1.0” < / em>并为angular2 +应用程序创建自定义主题，您应该从ag-grid-community包中导入到全局样式文件（在我的案例中使用scss）几个mixins文件，它看起来像这样：

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

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

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

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

链接到有关AG参数函数link的文档。链接到有关主题自定义link的文档。

角度使用示例：

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

定制Ag-Grid主题的问题

2 个答案: