Материал ячейки не будет полностью менять цвет фона - PullRequest
Новая
       6

Материал ячейки не будет полностью менять цвет фона

0 голосов
/ 04 февраля 2019

У меня есть угловой материал 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, поэтому у меня есть только базовое понимание стилей!

1 Ответ

0 голосов
/ 05 февраля 2019

Попробуйте изменить строки scss на 

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

Попробуйте создать демонстрацию slackblitz, если это не решит проблему

...