How do you style an angular material table? [closed]

I need some help with styling an angular material table. How do yous style the headers and the cells?

This is my app.component.html:

<table mat-table [dataSource]="dataSource"> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef>Name</th> <td mat-cell *matCellDef="let element">{{ element.name }}</td> </ng-container> <ng-container matColumnDef="rating"> <th mat-header-cell *matHeaderCellDef>Rating</th> <td mat-cell *matCellDef="let element">{{ element.rating }}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

1 Answer

You can apply css on mat-header-cell for header style and mat-cell for data cell.

.mat-header-cell { color: red;
}
.mat-cell { color: blue;
}

See the Stackblitz