Тема углового материала пагенатора цвет фона - PullRequest
Новая
       29

Тема углового материала пагенатора цвет фона

0 голосов
/ 03 октября 2019

Привет, я пытаюсь изменить фон элемента управления 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>

результат: Example showing that background is set to white regardless

желаемый результат - установить цвет фона этого компонента (и некоторых других)

СпособЯ пытаюсь установить фон на основе темы Angular Material2 - как установить фон приложения?

1 Ответ

0 голосов
/ 03 октября 2019

Похоже, что <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, и вполне вероятно, чтоему нужен тот же цвет фона.

...