css - Alternative to /deep/

Question

I want to change the styles of ng bootstrap pagination component and using /deep/ links in an Angular 6 app. The following code works fine but the console is showing a warning that the code is deprecated.

So, how should I change it to get rid of the warning?

Here is the CSS code I am currently using:

ngb-pagination /deep/ .page-item.disabled .page-link{
    background: none;
  }

 ngb-pagination /deep/ .page-item.active .page-link {
    background-color: #223C61;
    &:focus, &:visited{
      outline: none;
      box-shadow: none;
    }
  }

Answer 1

An alternative to using /deep/ or ::ng-deep is to disable View Encapsulation on your components that use third party UI elements.

@Component({
  selector: 'app-mycomp',
  templateUrl: './mycomp.component.html',
  styleUrls: ['./mycomp.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Doing so means that:

Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

If you turn off view encapsulation make sure to target only the html element you really want, and not any other elements of the same type in different components of your app (e.g. add a custom class or id to your element).

When I disabled ViewEncapsulation I also had to use !important in my CSS to overwrite existing third party styles, while it wasn't always needed with ::ng-deep.