html - 样式化 Angular 材质分页器

Question

我有一个 Angular Material Paginator 看起来像

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

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

请让我知道如何做所需的样式？

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

Answer 1

使用这个 css（更多样式打开 F12 并覆盖材料声明）：

查看工作代码

::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。例子

Answer 2

如果您对组件使用单独的样式并且您想要样式子组件，则需要在样式子组件选择器css样式::ng-deep之前在您的样式中使用，例如：

::ng-deep .mat-select-value {
  border: 1px solid red!important;
}

Answer 3

使用时::ng-deep尝试添加更多限制性选择器，以降低副作用的风险，例如

::ng-deep {
  .mat-select-panel[aria-label="Items per page:"] {
    .mat-option-text {
      font-size: 1.4rem;
    }
  }
}