如何为 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组件。