Angular style css not overwritten by default style using 'ngx-pagination'

Question

I'm currently using the 'ngx-pagination' module from Michael Bromley. The module is working fine, but it seems to be the only pagination module that doesn't use the existing theme css. Now it looks like:

Reading his explanation, it seems that it should be easy by simply override the css by adding /deep/. Well, it doesn't work... Some people say it's 'deprecated', so I've tried adding !important, but that doesn't seem to work as well.

See -> https://stackblitz.com/edit/angular-p3swdg

In the 'app.component.css' I've uploaded the theme css and in the end it should look like (see documentation):

Any help would be appreciated.

Answer 1

Here is quick working stackblitz solution.

.pagination /deep/ .ngx-pagination .current {
    background: red;
  }

  .pagination /deep/ .ngx-pagination li {
    border: 1px solid #CCCC;
    margin-right: 0px;
  }

   .pagination /deep/ .ngx-pagination a::after{
     display: none;
   }

   .pagination /deep/ .ngx-pagination li::before{
     display: none;
   }

    .pagination /deep/ .ngx-pagination li::after{
     display: none;
   }

    .pagination /deep/ .ngx-pagination a::before{
     display: none;
   }

using /deep . You can polish the css better but you'll get the idea from this.