0

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?

IonicMan
  • 743
  • 1
  • 12
  • 31

1 Answers1

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.

MGX
  • 2,534
  • 2
  • 14