无法更改 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 pseudo-class 应用于任何 CSS 规则会完全禁用该规则的视图封装。

例如，如果您在 style.css 中使用日期选择器样式，我经常不得不使用 /deep/、::ng-deep 或 >>> 修饰符。在你的情况下是 ::ng-deep .bs-datepicker-head,

您也可以看看 theming bootstrap "Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets."

无法更改 bootstrap-datepicker 的颜色

Can't change the color of bootstrap-datepicker

css

bootstrap-datepicker

bootstrap-4

angular

angular7