IgxGrid 選択行とホバー行の背景色を変更する

この KB は 製品バージョン 10.0.6 をベースにしています。

IgxGridの選択行とホバー行の背景色を変更したい場合は、CSSで各DOM要素にborderの設定をしてください。ここでは、IgxGridのデフォルトのテーマをカスタマイズする方法で説明します。

デフォルトのテーマをカスタマイズする基本的な方法は、

• 「データグリッド」→「スタイルの構成」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid.html#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AE%E6%A7%8B%E6%88%90
• 「データ ツリー グリッド」→「スタイル設定」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree_grid.html#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E8%A8%AD%E5%AE%9A

を見てください。

そして、

• ホバー行の背景色の指定は、$row-hover-background
• 選択行の背景色の指定は、$row-selected-background

で行います。

/* styles.scss */
@import '~igniteui-angular/lib/core/styles/themes/index';
@include igx-core();

/* 背景色のCSS変数 */
$my-hover-background: pink;
$my-row-selected-background: darkblue;

/* カスタムテーマの作成 */
$custom-theme: igx-grid-theme(
    $row-selected-background: $my-row-selected-background,
    $row-hover-background: $my-hover-background,
);

:host {
    ::ng-deep {
        /* カスタムテーマの読み込み */
        @include igx-grid($custom-theme);
    }
}

　

実行結果

　

サンプル