Как настроить CSS для элементов управления ng-bootstrap с помощью Angular 2/Bootstrap 4

Question

Я использую два компонента ng-bootstrap ngbDropdown и ngb-pagination, и я хотел бы, чтобы они выравнивались вертикально рядом друг с другом.

ngb-pagination компонент создает этот HTML с классом .pagination с запасом 1rem

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

Я попытался изменить класс жгуты моего Угловой 2 компонента, используя следующее.

@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, чтобы стиль стилизовал через дочернее дерево компонентов во все представления дочерних компонентов./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; 
}