html - 如何修改primeng p日历样式？

Question

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

例如:

我希望它是这样的:required changes

但原来它看起来像这样: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;
}

期待输入。

谢谢

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;
}

希望对你有帮助!