Угловой материал: переопределить таблицу CSS внутри коврик-меню

Question

Я работаю над приложением в Angular 7 и Angular Material CDK 6. Я впервые работаю с Angular Material. Я должен переопределить CSS моих столбцов. Ни одна из моих попыток не сработала.

* 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>

Я не знаю, как поставить отступы, япробовал encapsulation: ViewEncapsulation.None в файле .ts и:

* 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;
   }}

Я не знаю, как поступить. У кого-нибудь есть идея?

Answer 1

Почему бы вам просто не добавить свой собственный класс к желаемому элементу. Например, я добавил класс «col-padding» к элементу th.

HTML

<th mat-header-cell *matHeaderCellDef class="col-padding">Date</th>

CSS

.col-padding {
    padding-left: 20px; 
}