如何修改primeng p日历样式？

Question

我正在尝试修改 primeng p-calendar，但它无法正常工作。

例如：

我希望它是这样的： 需要更改

但原来它看起来像这样： original image

到目前为止我尝试了什么：

HTML

 <div class="nxui-form-group">
    <label for="planEndDate">
      <img src="assets/images/calendar.svg" class="nxui-icon-small nxui-icon-align-bottom">
      {{ 'i18n.all-damage-reports.label.plan-end-date' | translate }}
    </label>

    <p-calendar formControlName="planEndDate"
                class="calendar-control"
                id= "planEndDate"
                [title]="'i18n.all-damage-reports.label.plan-end-date' | translate"
                [dateFormat]="'i18n.common.dateformat.shortdate-p-calendar' | translate"
                [locale]="'i18n.common.dateformat.calendar' | translate"
    ></p-calendar>
  </div>

CSS

 p-calendar.calendar-control  {
  opacity: 1;
  color: black;
  background: #eeeeee;
}

期待投入。

谢谢

原文由 Blancho 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您应该使用 angular 的特殊选择器来更改组件样式，例如 :host 或 ::ng-need，您可以在官方文档中查看：

https://angular.io/guide/component-styles

 ::ng-deep body .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
margin: 0;
padding: 0;
line-height: 1;
color: goldenrod;
}

::ng-deep .ui-datepicker .ui-datepicker-group {
background-color: cadetblue;
}

希望对您有所帮助！

原文由 K.Mouna 发布，翻译遵循 CC BY-SA 4.0 许可协议