如何以角度更改劍道網格中選定行的顏色

Question

嗨，我正在引導程序模態彈出窗口上動態加載劍道網格，我正在以角度定義該特定組件的 .css 文件中的類，但仍未應用顏色仍然顯示選定行的紅色。

以下是劍道網格的代碼

    <div class="row">
    <kendo-grid [data]="previewGridSource" [selectable]="selectableSettings" 
    [rowClass]="rowCallback" [kendoGridSelectBy]="selectedCallback"
              [selectedKeys]="mySelection">
    <kendo-grid-checkbox-column title="Select" width="70"></kendo-grid-checkbox- 
     column>
    <kendo-grid-column field="BookingDetailId" title="BookingDetailId" 
     width="40" hidden="hidden">
    </kendo-grid-column>
    </kendo-grid-column>
    <kendo-grid-column field="Hours" title="Hours" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="Loading" title="Loading" width="100" 
    [format]="format">
    </kendo-grid-column>
    <kendo-grid-column field="StartDate" title="Start Date" width="100" format=" 
    {0: dd-MM-yyyy}">
    </kendo-grid-column>
    <kendo-grid-column field="EndDate" title="End Date" width="100" format="{0: 
    dd-MM-yyyy}">
    </kendo-grid-column>
    <kendo-grid-column field="Unconfirmed" title="Unconfirmed" width="120">
    </kendo-grid-column>
    <!-- <kendo-grid-column title="Done" width="100" >
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <input type="checkbox" name="checkBoxDone" checked>
      </ng-template>
    </kendo-grid-column> -->
  </kendo-grid>

   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 pr-0">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <button class="cancelBtn" (click)="cancel()"><span class="glyphicon 
   glyphicon-remove-sign pr-5"></span>Cancel</button>
    </div>
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <!--button class="deleteBtn" (click)="save()"><span class="glyphicon 
       glyphicon-ok-sign pr-5"></span>Submit</button-->
       <button class="addBtn" (click)="save()"><span class="glyphicon glyphicon- 
    ok-sign pr-5"></span>Submit</button>
    </div>
   </div>
   </div>

以下是css文件中的代碼

.k-grid .k-state-selected {
background-color:lightgreen;
}

即使在應用背景顏色后，我也會在紅色背景中獲取選定的行。

Answer 1

我能夠使用以下方法使其工作：

::ng-deep .k-grid tr.k-state-selected > td {
    background-color: rgba(3, 155, 229, 0.25);
}