在日期选择器中自定义样式 ngx-bootstrap

Question

我想在 ngx-bootstrap 的日期选择器中添加自定义样式（在 angular 4 中），因为我希望日期选择器的 header 具有白色背景和所有文本出现在 header 上，如月份名称、箭头键、黑色年份。

bs-datepicker.css 中的默认样式未提供所需的样式。除了修改库文件之外，是否有其他方法可以修改默认样式，因为它不是一个选项。

Answer 1

您可以直接覆盖项目样式表中的标准样式，但您需要使用更具体的选择器或 !important。

body .bs-datepicker-container .bs-datepicker-head {
  background-color: #fff;
}
body .bs-datepicker-container .bs-datepicker-head * {
  color: #000;
}

示例 - https://stackblitz.com/edit/angular-z9cn3d?file=styles.css

Answer 2

更改颜色变量

.bs-datepicker-head,
.bs-datepicker-head, .bs-datepicker button:active,
.bs-datepicker-body table td span.selected, 
.bs-datepicker-body table td.selected span,
.bs-datepicker-body table td span[class*="select-"]:after,
.bs-datepicker-body table td[class*="select-"] span:after, 
.bs-datepicker-body table td.active-week span:hover 
{
background-color: $primary !important; 
}

.bs-datepicker-body table td.week span 
{
color: $primary !important; 
}

在日期选择器中自定义样式 ngx-bootstrap

Customize styling in date picker ngx-bootstrap

datepicker

ngx-bootstrap

angular