如何自定义 Angular Material 分页器的 css？答案

【问题标题】：How to customize the css for Angular Material paginator?如何自定义 Angular Material 分页器的 css？
【发布时间】：2020-07-09 01:12:37
【问题描述】：

我想修改 Angular Material Paginator 的默认外观。比如我想把 justify-content 属性改成 flex-start。

.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 56px;
padding: 0 8px;
flex-wrap: wrap-reverse;
width: 100%;}

我所做的是-我将下面的css粘贴到styles.css文件中

.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 56px;
padding: 0 8px;
flex-wrap: wrap-reverse;
width: 100%;}

但这没有用。我还尝试了组件的 css 文件中的 css。但这也没有用。那么如何修改css呢？

更新

原来我必须使用 !important 并且它有效！。我避免那样做，但别无选择。如果有更好的解决方案，请告诉我。

【问题讨论】：

一个关于 stackblitz 的最小示例，它重现了这个问题，将帮助每个人在这方面提供帮助
确保并在控制台中验证（检查）您的样式是否已添加或仍被其他类覆盖。正如 AlqbalRaj 所说，stackblitz 将帮助我们找到您失踪的地方。
@AIqbalRaj 由于某些原因，我只能更改分页器的背景颜色。其他所有 css 都会被覆盖。
同样的问题。

标签： css angular angular-material

【解决方案1】：

你可以使用 ::ng-deep 来改变mat-paginator的样式

:host ::ng-deep.mat-paginator .mat-paginator-container{
  justify-content: flex-start;
}

不使用 ::ng-deep(对于 Angular 8+)

关闭您更改填充的组件的封装。

你可以这样做

 import {Component,ViewEncapsulation} from '@angular/core';
 @Component({
   selector: 'example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   encapsulation : ViewEncapsulation.None,
 })
 export class ExampleComponent {}

将要设置样式的组件包装在自定义类中。所以它不会影响任何其他mat-paginator 组件。

【讨论】：

抱歉，因为类名错误。它应该是 .mat-paginator 而不是 .paginator。我在答案中对其进行了编辑。
不幸的是，AM 8 不能（不再有效？）

【解决方案2】：

通过在 css 中添加 !important，我没有成功。所以我在 app.component.css 文件中做了这个：

.mat-paginator {
     display: flex;
     justify-content: center;
 }

但是你可能会抱怨你可能不希望分页器是“flex”的。您可以将孔分页器放在 div 标签中，以确保它将显示为块：

在 app.component.html 中：

  ...
     <div class="container">
         <mat-paginator>
              ......
         </mat-paginator>
     </div>
  ...

PS：添加 !important 不是一个好主意。

【讨论】：

【解决方案3】：

你应该把::ng-deep放在类选择器之前：

::ng-deep .mat-paginator-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 0 8px;
  flex-wrap: wrap-reverse;
  width: 100%;
}

【讨论】：