主题角材料分页器背景色

Question

嗨，我正在尝试更改角度项目中的mat-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，并且可能需要相同的背景色。