更改 ngx 分页 CSS

Question

如何更改ngx-paginationCSS？我尝试过：

: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;
}

在组件 .css 内部，但没有任何变化，我收到此警告

[弃用] CSS 动态配置文件中不再支持 /deep/ 组合器。它现在实际上是无操作的，就像一个后代组合器一样。/deep/组合器将被移除，并且在M65处无效。你应该删除它。有关更多详细信息，请参阅https://www.chromestatus.com/features/4964279606312960 。

我该如何解决这个问题？感谢您的时间！

编辑：

.html

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

.css

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

编辑2：（渲染后的html）

<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>

Answer 1

通过将所有样式设置为 !important 进行以下更改

组件.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;
}