你如何设计一个有角度的材料表？ [关闭]答案

【问题标题】：How do you style an angular material table? [closed]你如何设计一个有角度的材料表？ [关闭]
【发布时间】：2020-08-18 02:51:34
【问题描述】：

我需要一些帮助来设计有角材质表的样式。您如何设置标题和单元格的样式？

这是我的 app.component.html：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <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>

【问题讨论】：

看来您使用的是 Angular (2+) 语法，但您导入了 angularJS。我不确定这是否与您遇到的问题有关，但我认为您应该删除该导入

标签： html css angular angular-material

【解决方案1】：

您可以在 mat-header-cell 上应用 css 作为标题样式，在 mat-cell 上应用 css 作为数据单元格。

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

.mat-cell {
  color: blue;
}

见Stackblitz

【讨论】：