How to customize the css for Angular Material paginator?

Question

I want to modify the default look of Angular Material Paginator. For example, I want to change the justify-content property to 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%;}

What I did was- I pasted the css below in styles.css file

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

But that didn't work. I also tried the css in the component's css file. But that also didn't work. So how can I modify the css ?

UPDATE

Turns out that I had to use !important and it worked!. I was avoiding that that but had no other choice. Any better solutions, then please let me know.

Answer 1

you can use ::ng-deep to change the style of mat-paginator

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

Without using ::ng-deep( for Angular 8+ )

Turn off encapsulation of your component inside which you change the padding.

You can do this by

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

Wrap the component you want to style in a custom class. So it wont affect any other mat-paginator components.

Answer 2

By adding !important in css, I didn`t succeed. So I did this in app.component.css file:

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

But you might complain that probably you don`t want the paginator to be "flex". You can put the hole paginator in a div tag to make sure that it will be shown as a block:

In app.component.html:

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

PS: Adding !important is NOT a good idea.

Answer 3

You should put ::ng-deep before the class selector:

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