如何在Angular 5中自定义Bootstrap日期选择器的样式（修改颜色）

嘿，我之前也折腾过ng-bootstrap日期选择器的样式定制，给你分享几个实用的方法来修改它的颜色，亲测有效：

1. 先定位要修改的CSS类 #

打开浏览器开发者工具（按F12），点击日期选择器的元素，就能找到对应样式的类名：

• 选中日期的样式类：.ngb-dp-day.selected
• 日期悬停效果：.ngb-dp-day:hover
• 顶部月份/年份导航按钮：.ngb-dp-navigation button
• 当前日期的标记：.ngb-dp-day.current

2. 全局样式覆盖（推荐） #

在项目的全局样式文件（比如styles.scss或styles.css）里添加自定义样式，这样能确保样式优先级足够高：

/* 修改选中日期的背景色和文字颜色 */
.ngb-dp-day.selected {
  background-color: #2563eb !important; /* 换成你想要的颜色 */
  color: #ffffff !important;
}

/* 日期悬停时的背景色 */
.ngb-dp-day:hover:not(.disabled):not(.selected) {
  background-color: #dbeafe !important;
}

/* 导航按钮的文字颜色 */
.ngb-dp-navigation button {
  color: #2563eb !important;
}

/* 当前日期的边框颜色 */
.ngb-dp-day.current {
  border-color: #2563eb !important;
}

小提示：!important是为了强制覆盖默认样式，如果你的选择器足够具体（比如加上父元素类名），也可以不用它。

3. 单个组件内局部修改 #

如果只需要在某个组件里定制日期选择器样式，可以用Angular的深度选择器::ng-deep，在组件的样式文件中写：

:host ::ng-deep .ngb-dp-day.selected {
  background-color: #16a34a;
  color: #fff;
}

这样样式只会作用在当前组件内的日期选择器上，不会影响全局。

4. 进阶：通过SCSS变量全局换主题 #

如果你项目用的是Bootstrap的SCSS版本，可以通过修改变量来统一定制整个ng-bootstrap组件的颜色：

// 先引入Bootstrap的基础变量和函数
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// 替换默认的primary颜色
$primary: #2563eb;

// 再引入ng-bootstrap的样式
@import "~@ng-bootstrap/ng-bootstrap/scss/ng-bootstrap";

这种方法会同步修改所有基于Bootstrap的组件样式，适合做全局主题切换。

内容的提问来源于stack exchange，提问作者s.patric