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

我正在尝试修改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;
}

期待输入。
谢谢

最佳答案

我认为您应该使用特殊的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;
}

希望能对您有所帮助!

关于html - 如何修改primng p日历样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54803010/