如何为 Angular Material 分页器自定义 css？

Question

我想修改 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 粘贴到了 style.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 并且它起作用了！。 我一直在回避那个，但别无选择。 任何更好的解决方案，然后请告诉我。

Answer 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组件。

Answer 2

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

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

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

在 app.component.html 中：

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

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

Answer 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%;
}