I'm trying to pass a value into an Angular Material Table in order to set the row color to black. However, it seems like my CSS stylesheet keeps overriding this setting which is meant to make the rows gray. I thought inline styling should take precedence here, but it doesn't seem to be working as expected. What could be the issue?
My expectation was that setting the row color value would take precedence:
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngStyle]="{'background-color': row.color}"></mat-row>Instead, the CSS below (which sets specific columns to blue) appears to be taking precedence:
.mat-column-paios, .mat-column-papc, .mat-column-pd, .mat-column-appfamily-pa,
.mat-column-appfamily-pd, .mat-column-eis, .mat-column-appfamily-eis {
background-color: #26428b;
color: white;
flex: 0 0 7%;
}Here is the HTML code snippet:
<mat-table class="lessons-table mat-elevation-z8 overflow-x-auto" [dataSource]="serverLicenseDS" matSort (matSortChange)="sortData($event)">
<ng-container matColumnDef="paios">
<mat-header-cell *matHeaderCellDef>PAIOS</mat-header-cell>
<mat-cell *matCellDef="let e">{{e.paios}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngStyle]="{'background-color': row.color}"></mat-row>
</mat-table>And this is my relevant CSS:
.overflow-x-auto {
overflow-x: auto;
}
.mat-column-select {
overflow: initial;
}
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
}
.example-header {
min-height: 64px;
padding: 8px 24px 0;
}
.mat-column-sumName {
background-color: black;
color: white;
flex: 0 0 16%;
}
/* Other column styles */