css - 如何为 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 粘贴到 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 并且它起作用了!。我正在避免那样做，但别无选择。如果有更好的解决方案，请告诉我。

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