如何覆盖ngBootstrap日期选择器border-radius样式并设为0

当然有办法啦！完全不用修改ngBootstrap的源码，咱们可以通过几种方式穿透Angular的样式封装，覆盖组件的默认border-radius设置，具体方案如下：

方案一：使用Angular的::ng-deep深度选择器 #

这是最常用的穿透组件样式封装的方法，适合在单个组件的样式文件中使用，避免影响全局：

如果想直接覆盖所有日期选择器的样式，可以在组件CSS中写：

::ng-deep .ngb-datepicker {
  border-radius: 0 !important;
}

要是担心影响其他日期选择器，建议给你的日期选择器容器加个自定义类，再精准定位：

<!-- HTML代码 -->
<div class="my-date-picker-wrapper">
  <ngb-datepicker tabindex="0" class="ng-untouched ng-pristine ng-valid"> </ngb-datepicker>
</div>

/* 组件CSS代码 */
.my-date-picker-wrapper ::ng-deep .ngb-datepicker {
  border-radius: 0;
}

这里的::ng-deep会让样式穿透到子组件内部，精准覆盖目标元素的默认样式，而且不需要!important也能生效（因为选择器优先级更高）。

方案二：在全局样式文件中定义样式 #

全局样式文件（比如styles.css/styles.scss）不受组件样式封装的限制，可以直接在这里写样式覆盖：

全局覆盖所有日期选择器 #

.ngb-datepicker {
  border-radius: 0;
}

只覆盖特定的日期选择器 #

给目标日期选择器加个自定义类：

<ngb-datepicker class="custom-flat-datepicker" tabindex="0" class="ng-untouched ng-pristine ng-valid"> </ngb-datepicker>

然后在全局样式中写：

.custom-flat-datepicker {
  border-radius: 0;
}

这种方式不会污染组件内部样式，也很容易控制范围。

方案三：关闭组件的样式封装（谨慎使用） #

可以通过ViewEncapsulation.None关闭当前组件的样式封装，这样组件内的样式会变成全局样式，直接生效：

首先在组件类中设置：

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-datepicker {
  border-radius: 0;
}

⚠️ 注意：这个方法会让组件内的所有样式变成全局样式，容易和其他组件的样式冲突，建议只在必要时使用，并且尽量配合自定义类缩小影响范围。

总结一下，最推荐的是方案一（配合自定义类的::ng-deep）或者方案二（全局样式+自定义类），既能精准覆盖样式，又不会造成不必要的样式污染。

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