Question

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

: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动态配置文件中不再支持
[deprecation] / deep /组合器。现在实际上是no-op，就像它是后代组合器一样。 / 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

进行以下更改

component.css

 CREATE FUNCTION funcGetValue(Id INT) RETURNS VARCHAR
 BEGIN
    DECLARE theTitle VARCHAR DEFAULT ""
    SELECT MyTitle INTO theTitle FROM wp_bc_my_values WHERE MyId = Id
    RETURN theTitle
 END

}

Answer 2

而不是写这个

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

尝试写这个

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

::ng-deep应该具有更好的兼容性

Answer 3

将此代码放入myComponent.css

.paginator{
    font-family: 'Lato', sans-serif;
    font-size: 15px;
}

.paginator /deep/ .ngx-pagination .current {
    background: rgb(131, 131, 131);
    border-radius: 4px;
    padding-left: 9px;
    padding-right: 9px;
}

.paginator /deep/ .ngx-pagination a:hover, .ngx-pagination button:hover {
    background: #d4d4d4;
    border-radius: 3px;
    padding-left: 9px;
    padding-right: 9px;
    text-decoration: none;
}

.paginator /deep/ .ngx-pagination a:focus, .ngx-pagination button:focus {
    outline: none;
    background: #d4d4d4;
}

Answer 4

将css代码放入styles.css中，并且不带/deep/，后者是不推荐使用的伪类，用于禁用视图封装。

styles.css文件是放置全局样式的地方。

更改ngx-pagination CSS

4 个答案: