Angular 2/Bootstrap 4を使用してng-bootstrapコントロールのCSSをカスタマイズする方法

Question

2つのng-bootstrapコンポーネントngbDropdownとngb-paginationを使用しています。

ngb-paginationコンポーネントは、私は次のように使用して、私の角度2の成分をwithingクラスを変更しようとしてきた1rem

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

の余裕をもって.paginationのクラスで、このHTMLを作成します。

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

ここではこれら2つのコントロール

<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とは？

コンポーネントのスタイルは、通常、コンポーネントの独自のテンプレート内のHTMLにのみ適用されます。角度のドキュメントを引用する

/deep/selectorを使用すると、子コンポーネントツリーを介してすべての子コンポーネントビューにスタイルを強制的に適用できます。/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; 
}