主题 angular material pagenator 背景颜色

Question

您好，我正在尝试更改 angular 项目中 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>

结果：

期望的结果是为此组件（以及其他一些组件）设置背景颜色

我尝试设置背景的方式是基于

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 并且它可能需要相同的背景颜色。

主题 angular material pagenator 背景颜色

Theme angular material pagenator background colour

angular-material2