如何更改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 动态配置文件不再支持 /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>