角度材质：在Mat-menu内覆盖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>

我不知道如何放置填充，我已经在.ts文件中尝试过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;
   }}

我不知道如何进行。有人有主意吗？

Answer 1

为什么不将自己的类添加到所需元素。例如，我在th元素中添加了“ col-padding”类。

HTML

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

CSS

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