Cant use host with ng deep to style Angular Material Paginator?

Question

So I have a Angular Material Paginator, which looks like this:

And this is how I use it in my html:

<div class="paginator-container">
  <mat-paginator
    #paginator
    [length]="dokumente.length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="getPaginatorData($event)"
  >
  </mat-paginator>
</div>

and this is my css to style that mat-option:

//this works, but will affect other components 
::ng-deep .mat-option {
  color: black !important;
}

I tried to use host here, but strangely it did have no effect:

//this does not work
:host ::ng-deep .mat-option {
  color: black !important;
}

And I tried to style the child element from the mat paginator, like this:

//this does not work
::ng-deep .mat-paginator .mat-option {
  color: black !important;
}

Also, when I looked in my dev console, I noticed that mat-option was not inside mat-paginator or inside my component. Like, I can not narrow it down that it belongs to my component:

Why is my host not working here? And how can I style that mat-option exclusively, without styling other mat-options in the project?

Answer 1

There are no available attributes that can help identify the cdkoverlay element.

There should be only one cdkoverlay available on the DOM at any given time, assuming this you can attach a class to the mat-select-panel-wrap element and apply your styles, this a hacky way of doing it, but it should work

constructor(private renderer: Renderer2){}

paginatorClicked(){
  this.renderer.addClass(document.getElementsByClassName('mat-select-panel-wrap')[0], 'black-color')
}

<div class="paginator-container">
  <mat-paginator
    #paginator
    [length]="dokumente.length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="getPaginatorData($event)"
    (click)="paginatorClicked()"
  >
  </mat-paginator>
</div>

in your styles file add these rules

.black-color .mat-option {
  color: black !important;
}