Question

我有一个角材料mat-table，它在mat-header-cell和mat-cell定义中包含一个选择框。我希望标题的背景为红色且前景为白色。我定义了一个类，但是只有三分之一的单元格（中间）是彩色的（对不起，我不知道如何添加图片来显示）。我尝试将内联背景颜色添加到td单元格中，但这没有任何改变。

这是html：

  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
        [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </td>
  </ng-container>

还有SCSS：

.mat-header-cell {
  font-size: 14px;
  background-color: firebrick;
  color: white;
}

有人可以告诉我我是否缺少什么吗？也许细胞的填充物导致细胞周围所有白色？

编辑：我要补充一点，我不是HTML开发人员，所以我对样式只有一个基本的了解！

Answer 1

尝试将scss行更改为

.mat-header-row {
  font-size: 14px;
  background-color: firebrick;
  .mat-header-cell{
    color: white;
  }
}

如果不能解决问题，请尝试提供slackblitz演示

材质单元不会完全改变背景颜色

1 个答案: