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.

a minimal example on stackblitz which recreates the issue will help everyone assist on this — Akber Iqbal
– Akber Iqbal, Commented Dec 10, 2018 at 6:16
Make sure and verify in console (inspect) whether your style has been added or still overwritten by some other class. As said by AlqbalRaj, stackblitz will help us to find where you are missing. — Padmapriya Vishnuvardhan
– Padmapriya Vishnuvardhan, Commented Dec 10, 2018 at 6:19
@AIqbalRaj for some reasons, I am only able to change the background color of the paginator. Every other css gets overridden. — Saif Ali
– Saif Ali, Commented Dec 10, 2018 at 6:39

Akhi Akl · Accepted Answer · 2020-06-22 05:30:42Z

8

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.

edited Jun 22, 2020 at 5:30

answered Dec 10, 2018 at 11:40

Akhi Akl

3,9401 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akhi Akl Over a year ago

sorry, Its because wrong class name. It should be .mat-paginator instead of .paginator. I had edited it in the answer.

Vincent Sels Over a year ago

Unfortunately doesn't work (no longer works?) with AM 8

Omid Ataollahi · Accepted Answer · 2019-07-25 13:47:48Z

1

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.

answered Jul 25, 2019 at 13:47

Omid Ataollahi

3783 silver badges9 bronze badges

Comments

Run_Script · Accepted Answer · 2020-07-08 17:12:37Z

1

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

edited Jul 8, 2020 at 17:12

Run_Script

2,5582 gold badges19 silver badges31 bronze badges

answered Jul 8, 2020 at 15:23

jDaniel.vg

113 bronze badges

Collectives™ on Stack Overflow

How to customize the css for Angular Material paginator?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related