如何在igx-grid中设置选定行的自定义背景色

<igx-grid [data]="data" [columns]="columns" (selectionChange)="onSelectionChange($event)">
</igx-grid>

.custom-selected-row {
  background-color: #ff0000; /* 设置自定义背景色 */
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ];

  columns = [
    { field: 'id', header: 'ID' },
    { field: 'name', header: 'Name' }
  ];

  onSelectionChange(event) {
    const selectedRow = event.newSelection; // 获取选定行的数据
    const gridRow = this.grid.getRowData(selectedRow); // 获取选定行的元素

    // 将自定义CSS类应用于选定行
    gridRow.nativeElement.classList.add('custom-selected-row');
  }
}