Change ngx-pagination CSS

Question

How can I change ngx-pagination CSS? I tried with:

:host /deep/ .ngx-pagination {
  padding-left: 0px;
}

:host /deep/.ngx-pagination .current,
.btn-info {
  background: #17a2b8 !important;
  border: transparent;
  border-radius: 20px;
}

:host /deep/.ngx-pagination .current:hover {
  background: #17a2b8 !important;
  border-radius: 20px;
  border: transparent;
}

inside component .css, but nothing changed, and I get this warning

[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/features/4964279606312960 for more details.

How can I solve this? Thank you for your time!

EDIT:

.html

  <div class="clearfix">
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
  </div>

.css

.clearfix {
  position: relative;
  right: 35%;
  left: 35%;
  font-size: 14px;
}

EDIT 2: (html after render)

<div class="clearfix">
    <pagination-controls nextlabel="Next" previouslabel="Previous" ng-reflect-previous-label="Previous"
      ng-reflect-next-label="Next">
      <pagination-template ng-reflect-max-size="7">
        <!--bindings={
    "ng-reflect-ng-if": "true"
  }-->
        <ul class="ngx-pagination ng-star-inserted" role="navigation" aria-label="Pagination">
          <!--bindings={
    "ng-reflect-ng-if": "true"
  }-->
          <li class="pagination-previous disabled ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><span class="ng-star-inserted"> Previous <span class="show-for-sr">page</span></span></li>
          <li class="small-screen"> 1 / 93 </li>
          <!--bindings={
    "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
          <li class="current ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }-->
            <!----><span class="show-for-sr ng-star-inserted">You're on page </span><span class="ng-star-inserted">1</span></li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>2</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>3</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>4</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>5</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ellipsis ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>...</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <li class="ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
              </span><span>93</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
          <!--bindings={
    "ng-reflect-ng-if": "true"
  }-->
          <li class="pagination-next ng-star-inserted">
            <!--bindings={
    "ng-reflect-ng-if": "true"
  }--><a tabindex="0" aria-label="Next page" class="ng-star-inserted">
              Next <span class="show-for-sr">page</span></a>
            <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
          </li>
        </ul>
      </pagination-template>
    </pagination-controls>
  </div>

Solution 1

make the following changes by setting all style to !important

component.css

.ngx-pagination {
  padding-left: 0px !important;
}

.ngx-pagination .current,
.btn-info {
  background: #17a2b8 !important;
  border: transparent !important;
  border-radius: 20px !important;
}

.ngx-pagination .current:hover {
  background: #17a2b8 !important;
  border-radius: 20px !important; 
  border: transparent !important;

}

Solution 2

Instead of writing this

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

try tο write this

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

::ng-deep should be preferred for a broader compatibility

Comments

[Techdive]

I tried this - component.css .my-pagination /deep/ .ngx-pagination .current { background: #0b3c6d !important; } ............. Still not working

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.