PrimeNG 日历 - 覆盖默认样式

Question

使用 angular，我在一个组件中使用 p-calendar 并创建了一个从我的组件调用的 CSS class。无论我做什么我都无法覆盖样式。

CSS

.ui-calendar .ui-calendar-button {
    height: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 900em;
    border-left: 0 none;
}

HTML

<div class="form-group col-xs-3 col-md-3"
                                     [ngClass]="{
                                     'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
                                     !ersaForm.get('effectiveDt').valid
                                     }">
                                    <label for="effectiveDtId" class="control-label">Effective Date</label><br />

                                    <p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
                                                 inputStyleClass="form-control " 
                                                 class="ui-calendar ui-calendar-button"
                                                 [style]="{'width': '100%','display': 'inline-flex','height':'34px'}"  ></p-calendar>

                                </div>

************************************************ *******更新*********************************************

我将 SCSS 文件更改为

::ng-deep .only-style-this .ui-calendar .ui-calendar-button { 
height: 34px !important; 
border-top-left-radius: 0 !important;
}

HTML

  <div class="form-group col-xs-3 col-md-3 only-style-this"
                                 [ngClass]="{
                                 'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
                                 !ersaForm.get('effectiveDt').valid
                                 }">
                                <label for="effectiveDtId" class="control-label">Effective Date</label><br />

                                <p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
                                             inputStyleClass="form-control" 

                                             styleCalss=".ui-calendar .ui-calendar-button"
                                             [style]="{'width': '100%','display': 'inline-flex','height':'34px'}"  ></p-calendar>

                            </div>

警告

验证（CSS 3.0）：“::ng-deep”不是有效的伪元素。

Answer 1

您不能调整子组件的 css，它会破坏封装。这会起作用，但是 deprecated:

::ng-deep .ui-calendar .ui-calendar-button {
    height: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 900em;
    border-left: 0 none;
}

这与将其添加到全局样式表基本相同。然而，全局样式只会在组件第一次加载时应用，这使得它非常糟糕。为了安全起见，您可以将组件包装在 "only-style-this" class 中并执行：

::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
  ...
}

或者，prime-ng 通常允许您将样式与其大部分组件一起传递。

如果您查看 docs，您会发现有一种样式属性可以使用。您可能还想使用其他属性，例如 inputStyle。

Answer 2

我用的是 prime ng ver 12.xx 在 fiel style.css (Angular cli

中为我覆盖这个 ok

.p-datepicker table td{ padding: 0px; }
.p-datepicker table td > span {  height: 45px;width: 50px; }

Answer 3

如以下答案所示https://forum.primefaces.org/viewtopic.php?t=53756只需将您的样式作为列表项放入文件中的样式数组中angular.json

"styles": [
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/fullcalendar/dist/fullcalendar.min.css",
        "../node_modules/quill/dist/quill.snow.css",
          "../node_modules/nanoscroller/bin/css/nanoscroller.css",
        "styles.css"
      ],

那你就可以自由使用你的css

PrimeNG 日历 - 覆盖默认样式

PrimeNG Calendar - Override the default style

css

primeng

angular

primeng-calendar