样式化 Angular 材质分页器答案

【问题标题】：Styling Angular Material Paginator样式化 Angular 材质分页器
【发布时间】：2019-05-14 07:37:47
【问题描述】：

我有一个 Angular Material 分页器，看起来像

我想给它设置样式，它应该看起来像

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

请告诉我如何做所需的样式？

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

【问题讨论】：

请在 stackblitz fork 中分享您的代码并向我们展示链接：stackblitz.com/edit/angular-material
这是我们可以帮助您的唯一方法（请输入 blitz only 相关代码）
给你Link我想将表格中的分页器设置为我的问题@לבנימלכה中显示的目标分页器
不错！将此链接添加到问题
我已添加链接！

标签： html css angular angular-material angular-material-paginator

【解决方案1】：

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

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

【讨论】：

非常感谢您的帮助和如此快速的回复！但是如果您看到目标分页器-它有 40 个项目中的 1-15 个。所以目前代码显示为 11 的 1-10。如何添加这个“项目”。导航箭头也应该移到右侧。
谢谢！有没有办法在 11 的 1-10 之后添加“项目”？它应该看起来像 11 个项目中的 1-10 个
我觉得你控制不了
是的……我想是的！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：