Infragistics｜Ignite UI for Angular｜更改 IgxGrid 選擇行和懸停行的背景顏色

尚無瀏覽量

2023-07-17 更新

如果要更改 IgxGrid 的選擇行和懸停行的背景顏色，請使用 CSS 在每個 DOM 元素上設置邊框。這裡我將向您展示如何自定義IgxGrid的默認主題。

自定義默認主題的基本方法是

數據網格 -> 配置樣式

https://en.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://en.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

請參見

指定hover行的背景顏色為$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);
    }
}