css - Material 单元不会完全改变背景颜色

Question

我有一个 Angular Material mat-table，它在 mat-h​​eader-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 演示