主题角材质分页器背景色

Question

您好，我正在尝试更改 Angular 项目中 mat-pagenator 控件的背景。

但是，pagenator 似乎总是显示为白色。无论我在应用程序中设置的背景颜色如何。

styles.scss

@import '~@angular/material/theming';
@include mat-core();
$sample-material-app-primary: mat-palette($mat-indigo);
$sample-material-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sample-material-app-warn: mat-palette($mat-red);
$sample-material-app-theme: mat-light-theme($sample-material-app-primary, $sample-material-app-accent, $sample-material-app-warn);
$background: map-get($sample-material-app-theme, background);
$background: map_merge($background, (background: #FF1010));
$theme: map_merge($sample-material-app-theme, (background: $background));
@include angular-material-theme($theme);
@include mat-paginator-theme($theme);
//Just so we can see a background color
html, body { height: 100%; background-color: bisque }

app.component.html

<mat-form-field>
  List length:
  <input matInput [(ngModel)]="length">
</mat-form-field>

<mat-form-field>
  Page size:
  <input matInput [(ngModel)]="pageSize">
</mat-form-field>
<mat-form-field>
  Page size options:
  <input matInput
         [ngModel]="pageSizeOptions"
         (ngModelChange)="setPageSizeOptions($event)">
</mat-form-field>

<mat-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="pageEvent = $event">
</mat-paginator>

<div *ngIf="pageEvent">
  <h5>Page Change Event Properties</h5>
  <div>List length: {{pageEvent.length}}</div>
  <div>Page size: {{pageEvent.pageSize}}</div>
  <div>Page index: {{pageEvent.pageIndex}}</div>
</div>

结果：

期望的结果是为这个组件（和其他一些）的背景设​​置颜色

我尝试设置背景的方式是基于Angular Material2 theming - how to set app background?

Answer 1

<mat-paginator> 似乎是从卡片继承其背景颜色，而不是从 background 属性。

<mat-table> 似乎也是如此，因此要设置以下这些的默认样式：（请注意，这是一种难看的颜色，只是为了证明颜色有效）

@import '~@angular/material/theming';
@include mat-core();
$sample-material-app-primary: mat-palette($mat-indigo);
$sample-material-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sample-material-app-warn: mat-palette($mat-red);
$sample-material-app-theme: mat-light-theme($sample-material-app-primary, $sample-material-app-accent, $sample-material-app-warn);
$background: map-get($sample-material-app-theme, background);
$bg-color: #FF1010;
$background: map_merge($background, (background: $bg-color, card: $bg-color, dialog:$bg-color));
$theme: map_merge($sample-material-app-theme, (background: $background));
@include angular-material-theme($theme);
@include mat-paginator-theme($theme);
//Just so we can see a background color
html, body { height: 100%; background-color: bisque }

注意我还在其中添加了对话框，因为它也设置为white，并且它可能需要相同的背景颜色。