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

如果要更改 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);     } }