更改 mat-paginator 的 [pageSizeOption] 字体大小和字体系列

Question

我的应用程序中有一个 mat-paginator，但我似乎无法在显示时更改 [pageSizeOptions] 的字体大小。

<mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator>

我的意思是，与写在它旁边的 "items per page" 相比，“10”太小了。

CSS 甚至无法工作：

.mat-paginator {
    font-family: 'Raleway'!important;
    font-size: large!important;
}

我使用 theme.scss 搜索了一个解决方案：

$custom-typography: mat-typography-config(
  $font-family: '"Raleway", "sans-serif"',
  $body-2:        mat-typography-level(16px, 24px, 600)
);

@include mat-core($custom-typography);

但是没有成功。你们知道如何实现吗？

Answer 1

也许你可以在你的样式文件中使用 ::ng-deep:

::ng-deep .mat-select-value {
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

::ng-deep .mat-option-text {
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

更改 mat-paginator 的 [pageSizeOption] 字体大小和字体系列

Change mat-paginator's [pageSizeOption] font-size and font-family

html

css

paginator

angular-material

angular