在kendo网格中应用自定义css后，所选行颜色不均匀

Question

嗨，我在bootstrap模式弹出窗口上动态加载kendo网格，我在.css文件中定义了特定组件的类，但仍然没有应用颜色，仍然显示选定行的红色，这是默认设置。

以下是kendo grid的代码

 <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

我建议使用以下css类。

/*for selected row color*/
.k-grid td.k-state-selected, .k-grid tr.k-state-selected>td 
{
   background-color:lightgreen;
}

/*for hover row color*/
.k-grid tbody tr:hover, .k-grid tbody tr.k-state-hover
{
   background-color:lightblue;
}