::ng-deep only works without :host when styling Angular Material Paginator

Question

So, usually I never had problems styling a css class with :host ::ng-deep but I am currently customizing an Angular Material Paginator and the only way that currently works, is like this:

::ng-deep .cdk-overlay-pane {
  bottom: 73.7px !important;
}

Problem here is, my ng-deep will also affect other elements with the same class in my project, which is a no-go. But using this:

:host ::ng-deep .cdk-overlay-pane {
  bottom: 73.7px !important;
}

will not work strangely.

Why does it not work? And how can I make it work?

Answer 1

First of all, you should not use ::ng-deep. If you find another solution, use it

(set this in yout style.scss for instance, with a custom class on what you want to edit)

Now, knowing that, it might be because of this : for whatever reason, your selector is not matched. In that case, try editing your selector to match the exact tree you're seeing. For example :

:host mat-paginator ::ng-deep .mat-paginator .cdk-overlay-pane {}

The point is, try adding EVERY element between your host, and the CDK class, and see if it works.