Question

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

例如：

我希望它像这样：required changes

但是原始的看起来像这样：original image

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

HTML

tr

CSS

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

期待输入。

谢谢

Answer 1

通过使用Inspect选择元素类，然后添加 :: ng-deep 选择器以强制子组件上的样式

::ng-deep .ui-inputtext {
/* Example */
    opacity: 1 !important;
}

Answer 2

在我的情况下，我想为日历图标设置样式，下面是html

<div class="main-container">
  <p-calendar showTime="true" hourFormat="12" [showIcon]="true"></p-calendar>
</div>

然后我在下面添加了样式，但是它不起作用：

.main-container ::ng-deep .ui-datepicker-trigger.ui-button {
  // add style here
}

然后我在p-calendar有效之后添加了::ng-deep

.main-container ::ng-deep p-calendar .ui-datepicker-trigger.ui-button {
  // add style here
}

Answer 3

您在模板中看到的代码不是浏览器DOM中的实际代码。还注入了其他一些元素，例如<input>用于文本输入。

尝试类似

p-calendar.calendar-control input {
  border: 1px solid black;
  background: #eeeeee;
}

无论如何，使用Inspect Element查看浏览器中的实际元素，并根据实际情况编写CSS。

Answer 4

您是否尝试过更改样式类？参见https://www.primefaces.org/primeng/#/calendar（样式）

例如

.ui-calendar .ui-inputtext {
  // place text styling here
}

Answer 5

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

希望对您有所帮助！

如何修改primng p日历样式？

5 个答案: