web-dev-qa-db-ja.com

Ag-Gridテーマのカスタマイズに関する問題

既存のAngularアプリ）でAg-Gridテーマ（例：ag-theme-material.css）をカスタマイズするにはどうすればよいですか？

documentation 提供されているものは、これらの変更/構成を実行する方法を説明していないため、不足しています。

どんな助けでも大歓迎です。

angularag-gridag-grid-ng2
6
Andrew Lobban

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をインポートします。以下のapp.component.cssファイルに示すように、コンポーネントごとに独自の.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;
}

角度-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"
      ]
9
koolhuman