css 如何更改日期选取器日历中工作日标题的颜色？

stszievb 于 2023-05-30 发布在其他

关注(0)|答案(3)|浏览(244)

我打算改变默认的蓝色的工作日标题的可访问性（参考突出显示的区域截图）。我尝试在CSS文件中使用下面的代码，但是无论我改变什么颜色代码，我都无法在UI中看到变化。不知道我错过了什么。你能给我点光吗？

.ngb-dp-weekday {
  color: #303536;
}

3条答案

我假设你没有访问color: var(--info) css的权限，否则你只需要在那里修改它。
为了覆盖其他css，你需要增加特异性。可以根据需要多次重复类名来实现这一点。

.ngb-dp-weekday.ngb-dp-weekday {
  color: #303536;
}

.ngb-dp-weekday.ngb-dp-weekday.ngb-dp-weekday {
  color: #303536;
}

直到成功

ngb-bootstrap通常使用ViewEncapsulation.None，所以你需要把你的.css放在一个通用的样式中，而不是组件的样式中
你可以尝试用你的styles.css写一些类似的东西

ngb-datepicker .ngb-dp-weekday{
    color:red;
  }

如果不起作用，则将输入包含在div中，class=“custom”

<div class="custom">
...your ngbDatepicker..
</div>

和使用

.custom ngb-datepicker .ngb-dp-weekday{
    color:red;
  }

如果只需要一个特殊的日期选择器，从ngb-bootstrap 9开始，你有属性datepickerClass，所以你可以写一些像

<input ngbDatepicker [datepickerClass]="'custom'" ...>

在styles.css中你可以写

ngb-datepicker.custom .ngb-dp-weekday{
    color:pink;
  }

你可以用途：：ng-deep

:host ::ng-deep .ngb-dp-weekday {
  color: #303536;
}