如何修改ng-bootstrap轮播NavigationArrows/NavigationIndicators颜色

针对^12.1.2版本的ng-bootstrap Carousel组件，不需要使用已废弃的::ng-deep语法即可实现样式修改，按推荐优先级排序的实现方式如下：

方案1：使用组件自定义模板能力（首推） #

ng-bootstrap Carousel原生支持自定义导航指示器、导航箭头的模板结构，直接替换默认渲染内容即可，样式完全自主可控，无废弃语法、无样式污染、无版本兼容问题。

1. 组件模板代码

<ngb-carousel>
  <!-- 自定义导航指示器 -->
  <ng-template ngbSlideId="indicators" let-indicators="indicators" let-active="active" let-registerIndicator="registerIndicator">
    <div class="custom-carousel-indicators">
      <button
        *ngFor="let indicator of indicators; let i = index"
        (click)="indicator.onClick(i)"
        [class.active]="active === i"
        #ref="ngbSlideIndicator"
        (registerIndicator)="registerIndicator(ref, i)"
      ></button>
    </div>
  </ng-template>

  <!-- 自定义导航箭头 -->
  <ng-template ngbCarouselControl let-direction="direction" let-click="click">
    <button class="custom-carousel-control" [class.carousel-control-prev]="direction === 'prev'" [class.carousel-control-next]="direction === 'next'" (click)="click()">
      <span *ngIf="direction === 'prev'">‹</span>
      <span *ngIf="direction === 'next'">›</span>
    </button>
  </ng-template>

  <!-- 原有轮播slide内容放在此处 -->
  <ng-template ngbSlide>
    <img src="your-slide-src" alt="轮播图">
  </ng-template>
</ngb-carousel>

2. 组件SCSS代码（直接写在当前组件样式文件中，无需任何穿透选择器）

.custom-carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 5;
  margin: 0;
  padding: 0;
  list-style: none;

  button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background-color: #222831;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;

    &.active {
      background-color: grey;
    }
  }
}

.custom-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: transparent;
  border: none;
  font-size: 2.5rem;
  line-height: 1;
  color: #222831;
  cursor: pointer;
  padding: 0 1rem;
  transition: color 0.2s ease;

  &:hover {
    color: grey;
  }

  &.carousel-control-prev {
    left: 0;
  }

  &.carousel-control-next {
    right: 0;
  }
}

该方案优势：

• 完全规避废弃的::ng-deep语法，开发工具不会产生废弃警告
• 不需要加!important强制覆盖默认样式，样式优先级完全可控
• 样式仅作用于当前轮播，不会污染全局其他组件
• 属于组件官方支持的扩展能力，后续版本升级不会出现样式失效问题

方案2：关闭组件视图封装（适合不想修改模板结构的场景） #

如果希望保留默认DOM结构，直接覆盖原有样式，可以通过关闭当前组件的视图封装实现，注意做好样式前缀隔离避免全局污染：

1. 在组件装饰器中修改视图封装配置

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})

2. 给轮播组件添加专属自定义类名做样式隔离

<ngb-carousel class="custom-carousel-theme">
  <!-- 轮播内容 -->
</ngb-carousel>

3. 编写覆盖样式（无需穿透选择器）

.custom-carousel-theme {
  /* 指示器样式覆盖 */
  .carousel-indicators button {
    background-color: #222831 !important;
  }
  .carousel-indicators .active {
    background-color: grey !important;
  }

  /* 导航箭头样式覆盖
  注意：默认箭头为背景SVG，直接设置color不生效，可通过filter调整颜色或替换背景图 */
  .carousel-control-prev,
  .carousel-control-next {
    &-icon {
      filter: invert(13%) sepia(8%) saturate(2390%) hue-rotate(182deg) brightness(94%) contrast(89%);
    }
    &:hover .carousel-control-prev-icon,
    &:hover .carousel-control-next-icon {
      filter: invert(47%) sepia(0%) saturate(1%) hue-rotate(186deg) brightness(96%) contrast(92%);
    }
  }
}

注意：::ng-deep已被Angular官方标记为废弃特性，仅做临时兼容使用，后续大版本会正式移除，不建议继续在生产项目中使用。

内容的提问来源于stack exchange，提问作者Dhanusha_Perera07