无法更改bootstrap-datepicker的颜色

Question

我使用带有bootstrap-datepicker的日期输入来显示日历，供用户选择日期。我正在尝试更改背景和头部的颜色，但它不起作用

下面是我的HTML代码：

<div class="row mb-1">
        <label class="col-lg-4 col-form-label col-form-label-sm" 
             for="time">End Date</label>
        <div class="col-lg-8 form-group">
          <input id="endDate" type="text" placeholder="To" class="form- 
          control" bsDatepicker
          [bsConfig]="{ adaptivePosition: true, dateInputFormat:'YYYY-MM-D 
          D' }" [(ngModel)]="selectedEndDate"
          (ngModelChange)="updateMyEndDate($event)"  [ngModelOptions]=" 
          {standalone: true}">
        </div>
 </div>

我尝试使用这些代码行更改颜色，但不起作用：

 .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: rgb(35, 87, 185) !important; 
 }

 .bs-datepicker-body table td.week span 
 {
    color: #6e8f88 !important; 
 }

有什么建议可以让它工作吗？

Answer 1

组件样式通常只应用于组件自己的模板中的HTML。

将::ng-deep伪类应用于任何CSS规则都会完全禁用该规则的视图封装。

例如，如果在style.css中使用datepicker样式，我通常必须使用/deep/、::ng-deep或>>>修饰符。在您的情况下，它将是::ng-deep .bs-datepicker-head,

您可能还会看到theming bootstrap“许多Bootstrap的各种组件和实用程序都是通过在Sass映射中定义的一系列颜色构建的。此映射可以在Sass中循环，以快速生成一系列规则集。”