I am currently developing an application using Angular 7 and Angular Material cdk 6. This is my first experience working with Angular Material and I am facing a challenge in overriding the CSS styles of my columns. Despite several attempts, none of them seem to have any effect.
* HTML *
<mat-menu #myMenu>
<ng-template myContentMenu>
<table mat-table>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef >Date</th>
<td mat-cell *matCellDef="let item" >{{ item.date }}</td>
</ng-container>
</table>
</ng-template>
Concerned about adding padding but not sure how to achieve it, I attempted using
encapsulation: ViewEncapsulation.None* CSS *
:host { /** With and without host */
th.mat-column-date, td.mat-column-date {
padding-left: 20px; /** With and without !important */
}
::ng-deep mat-menu th.mat-column-date,
::ng-deep mat-menu td.mat-column-date {
padding-left: 20px !important;
}}
Seeking guidance on how to proceed further. Any suggestions or ideas would be greatly appreciated?