如何使用Angular 2/Bootstrap自定義ng-bootstrap控件的CSS 4

Question

我正在使用兩個ng-bootstrap組件ngbDropdown和ngb-pagination，我希望它們彼此垂直排列。

的ngb-pagination組件與1rem

<nav> 
    <ul ng-reflect-class-name="pagination pagination-sm" class="pagination pagination-sm"> 
    </ul> 
</nav> 

我試圖改變類使用以下withing我的角2部分保證金創建這個HTML一類.pagination的。

@Component({ 
    selector: 'wk-company-list', 
    template: require('./list.html'), 
    styles: [` 
     .pagination { 
      margin-top: 0; 
      background-color: greenyellow; 
     } 
    `] 
}) 

以下是完整的HTML關閉頁面與這兩個控件

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh" 
      [gridOptions]="gridOptions" 
      rowSelection="multiple" 
      (cellClicked)="onCellClicked($event)" 
      (selectionChanged)="onSelectionChanged($event)"> 

</ag-grid-ng2> 


<div class="align-middle"> 

    <span ngbDropdown class="d-inline-block"> 
     <button class="btn btn-outline-primary btn-sm" id="dropdownMenu2" ngbDropdownToggle>25</button> 
     <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
      <button class="dropdown-item">25</button> 
      <button class="dropdown-item">50</button> 
      <button class="dropdown-item">100</button> 
      <button class="dropdown-item">200</button> 
      <button class="dropdown-item">1000</button> 
      <span class="text-muted">Total: {{vm.pagination.total}}</span> 
     </div> 
    </span> 
    <span class="float-xs-right"> 
     <ngb-pagination 
       style="margin-top: 0" 
       (pageChange)="onPageChange($event)" 
       [(page)]="vm.pagination.no" 
       [pageSize]="vm.pagination.size" 
       [collectionSize]="vm.pagination.total" 
       size="sm" 
       [maxSize]="5" 
       [ellipses]="false" 
       [rotate]="true" 
       [boundaryLinks]="true"> 
     </ngb-pagination> 
    </span> 
</div> 

Answer 1

您是否嘗試過使用您的組件樣式裏面的/deep/或>>>選擇？

舉角文檔：

組件樣式通常只適用於在組件自己的模板中的HTML。
我們可以使用/深/選擇通過子組件樹強制風格下到所有的子組件意見。/deep/selector可以處理任何嵌套組件的深度，並且它適用於組件的視圖子組件和子組件。

參見https://angular.io/docs/ts/latest/guide/component-styles.html以供參考。

Answer 2

例如：

ngb-pagination /deep/ .page-item.disabled .page-link { 
    background-color: greenyellow; 
}