Angular 4中ngx-bootstrap日期选择器自定义样式方案咨询

嗨，我之前也遇到过一模一样的需求，不用修改库文件就能搞定，给你几个靠谱的方案：

Angular默认的视图封装机制会阻止组件内的样式影响外部库组件，::ng-deep就是用来打破这个限制的。在你的组件样式文件（比如xxx.component.scss）里添加下面的代码：

::ng-deep .bs-datepicker-head {
  background-color: #ffffff !important; /* 设置头部白色背景 */
}

::ng-deep .bs-datepicker-head .current,
::ng-deep .bs-datepicker-head .datepicker-navigation [class*="icon"] {
  color: #000000 !important; /* 把月份名称、年份文本、箭头按钮统一改成黑色 */
}

小提示：!important是为了确保你的样式优先级高于库的默认样式，要是不想用它，可以提升选择器的特异性——比如加上你自己组件的类名，像.your-custom-component ::ng-deep .bs-datepicker-head，这样优先级就足够了。

如果你希望所有日期选择器都用这个样式，直接在项目的全局样式文件（比如styles.scss/styles.css）里写样式就行，不用加::ng-deep：

.bs-datepicker-head {
  background-color: #ffffff;
}

.bs-datepicker-head .current,
.bs-datepicker-head .datepicker-navigation [class*="icon"] {
  color: #000000;
}

全局样式本来就不受视图封装限制，写进去就能直接覆盖库的默认样式，简单省心。

你可以把使用日期选择器的组件的视图封装关掉，这样组件内的样式就会变成全局样式，直接覆盖库样式。在组件的TS文件里这么改：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourComponentComponent {
  // 你的组件逻辑
}

然后在组件样式文件里直接写样式就行，但这个方法要特别小心——组件内的所有样式都会变成全局的，很容易和其他组件的样式冲突，除非你能确保样式不会影响其他元素，否则不建议用。

要是上面的类名没生效，记得打开浏览器开发者工具（按F12），找到日期选择器头部的元素，查看它的实际类名。不同版本的ngx-bootstrap类名可能略有差异，自己确认一下更稳妥。

内容的提问来源于stack exchange，提问作者M.Chandna