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

Question

我正在使用两个ng-bootstrap组件ngbDropdown和ngb-pagination，我希望它们能够垂直对齐并排显示。 < p >

< p > ngb-pagination组件创建了一个具有1rem边距的.pagination类HTML。

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

我尝试使用以下代码更改我的Angular 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>

- David Cruwys

Answer 1

您是否尝试过在组件样式中使用 /deep/ 或 >>> 选择器？

引用 Angular 文档的话：

组件样式通常仅适用于组件自己的模板 HTML。
我们可以使用 /deep/ 选择器将样式强制传递到所有子组件视图中，无论多少层嵌套。/deep/ 选择器适用于任意嵌套深度，并且适用于组件的视图子代和内容子代。

请参阅 https://angular.io/docs/ts/latest/guide/component-styles.html 了解更多信息。

- Clemens Sum

---

这个穿透影子后代组合器已经被弃用，并且主要浏览器和工具的支持正在被移除。因此，我们计划在Angular中放弃对/deep/、>>>和::ng-deep的所有支持。在此之前，建议使用::ng-deep以获得更广泛的工具兼容性。 - Steven Stark

Answer 2

例如：

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

- Игорь Демянюк