如何修改primeng p-calendar样式？答案

【问题标题】：How to modify the primeng p-calendar style?如何修改primeng p-calendar样式？
【发布时间】：2020-06-24 17:56:51
【问题描述】：

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

期待输入。

谢谢

【问题讨论】：

你能把依赖关系摆弄一下吗？
@AllanJebaraj 有很多依赖。但是当我们在浏览器上尝试通过更改诸如“.ui-widget.ui-state:disabled”之类的类时，它工作得很好。但是当我们改变我们的系统时，同样的事情也不起作用。

标签： html css angular

【解决方案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;
}

希望对你有帮助！

【讨论】：

这完全正确。在我们的例子中，我们使用 :host ::ng-deep 您也可以直接使用进行操作，但这非常难看....不要那样做 :)
ng-deep 已弃用

【解决方案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
}

然后我在::ng-deep 之后添加了p-calendar，它起作用了

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

例如

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

【讨论】：

【解决方案5】：

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

试试类似的东西

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

不管怎样，用 Inspect Element 查看浏览器中的实际元素，并根据实际情况编写 CSS。

【讨论】：

其实有很多依赖类，我们都试过改了，还是不行。但是当我们直接在浏览器中为“.ui-widget.ui-state:disabled”之类的类更改它时，它工作得很好。
将自己的样式应用到 primeNg 组件是可行的，但很无聊。