html - 造型 Angular Material 分页器

我有一个 Angular Material Paginator，看起来像



我想设计它，它应该看起来像



我很难设计它的样式。我只能移动分页器中的元素(开始和结束位置)，除此之外我无法修改任何内容。

请让我知道如何做所需的造型？

这是 stackblitz 链接 https://stackblitz.com/edit/angular-tjhkpo

最佳答案

使用这个 css(更多样式打开 F12 并覆盖 Material 声明):

See working code

::ng-deep .mat-paginator-page-size-select {
    width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: transparent;
}

::ng-deep .mat-select-value {
  color: #005999;
    font-weight: bold;
    font-size: 15px;
}
::ng-deep .mat-select-arrow {
    color: #005999;
}
::ng-deep .mat-option{
  padding: 0!important;

}
::ng-deep .mat-option-text {

    text-align: right;
}

对于字幕修改，您应该提供 MatPaginatorIntl。 Example

关于html - 造型 Angular Material 分页器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53755894/