如何使用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; 
}