如何修改primng p日历样式? [英] How to modify the primeng p-calendar style?

问题描述

我正在尝试修改primeng p日历，但是无法正常工作.

I am trying to modify the primeng p-calendar, but it is not working properly.

例如:

我希望它像这样:必需的更改

但是原始的看起来像这样:原始图像

But original it looks like this:original image

到目前为止我尝试过的事情:

What i have tried so far:

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，您可以在官方网站中进行检查文档:

I think that you should use the special selectors of angular to change a component style like :host or ::ng-need, you can check that in the official documentation:

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

希望对您有所帮助！

这篇关于如何修改primng p日历样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！