How to customize ngx-datatable css for rows

Question

I try to apply some css for the ngx-datatable element like this.

.datatable-body-row:hover {
  background-color: #3387b5;
}

Nothing changed, result are the same. The css remains default setting. The color is still the same when I hover my mouse to the specific row. How can I customize it? Thankyou.

For reference the over all HTML structure are like this.

<ngx-datatable >
  <!-- row are included in these column, but these column includes header-->
  <ngx-datatable-column >
    
    <ng-template ngx-datatable-header-template>
      <label class="datatable-checkbox">
        <input />
      </label>
    </ng-template>

    <ng-template ngx-datatable-cell-template >
      <label class="datatable-checkbox">
        <input type="checkbox" />
      </label>
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column *ngFor="let column of columns; let i = index" >
  </ngx-datatable-column>

</ngx-datatable>

Answer 1

Probably lower CSS Priority

you can use this or raise Priority other way https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

.datatable-body-row:hover, 
.datatable-body-row:hover .datatable-row-group {
  background-color: #3387b5 !important;
}