如何完全自定义Angular Bootstrap组件样式？以ngb-datepicker为例

Angular组件样式默认是封装隔离的，所以直接在组件CSS中写.ngb-dp-weekday small不会生效——ng-bootstrap组件的样式被封装在自身作用域内，外部样式无法直接穿透。以下是几种可行的解决方法：

方法一：使用::ng-deep穿透样式（推荐配合:host限定范围） #

::ng-deep可以打破Angular的样式封装，让样式作用到子组件内部。为避免影响全局样式，建议结合:host选择器，仅作用于当前组件内的ngb-datepicker：

:host ::ng-deep .ngb-dp-weekday small {
  color: black;
}

如果遇到样式优先级冲突，可添加!important（优先通过优化选择器特异性解决，尽量少依赖!important）：

:host ::ng-deep .ngb-dp-weekday small {
  color: black !important;
}

方法二：关闭当前组件的样式封装 #

在组件装饰器中设置ViewEncapsulation.None，关闭样式隔离后，组件内的CSS会全局生效。注意要保证选择器足够精准，避免污染其他组件：

组件代码： #

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

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

CSS代码： #

.ngb-dp-weekday small {
  color: black;
}

方法三：在全局样式文件中定义样式 #

直接在项目全局样式文件（如styles.css/styles.scss）中添加样式规则，这种方式会作用于整个应用，适合需要全局统一ng-bootstrap组件样式的场景：

.ngb-dp-weekday small {
  color: black;
}

为什么内联样式无法生效？ #

内联样式仅能作用于当前绑定的元素，而ngb-datepicker的星期几文字是组件内部渲染的子元素，父组件无法通过内联样式直接控制这些内部元素的样式。

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