angular - 自定义 Ag-Grid 主题的问题

Question

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

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

如有任何帮助，我们将不胜感激。

Answer 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 文件所示。

应用程序组件.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"
      ]