Angular Material Add transparent color to Row on Hover

Question

I have an Angular Material mat-mdc-table. I want a greyish background color when I hover on a row.

.mat-mdc-row:hover{
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.04) !important;
} 

This works, but it overlaps with the white from parent and creates a third color in the padding.

I want an uniform color for my hover row. I don't know why this transparency is applied twice. Just surrounding white and the row's greyish.

• I tried to use hex color background-color: #0000000A; but no success.
• In browser I identified this CSS affects it:

.mat-mdc-table tbody, 
.mat-mdc-table tfoot, 
.mat-mdc-table thead, 
.mat-mdc-cell, 
.mat-mdc-footer-cell, 
.mat-mdc-header-row, 
.mat-mdc-row, 
.mat-mdc-footer-row, 
.mat-mdc-table 
.mat-mdc-header-cell {
    background-color: inherit;
}

• My row has padding of 16px and it seems the padding has this color, but in theory should be the same with tags' content color.

Answer 1

You can try using the following css in your styles.scss file

.mat-mdc-row:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.04) !important;
  .mat-mdc-cell {
    background: transparent;
  }
}