PrimeNG 日历 - 覆盖默认样式

Question

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

.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，它会破坏封装。这将起作用，但已弃用：

::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"类中，并执行以下操作：

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

或者，prime-ng 通常允许您将样式与其大多数组件一起传入。

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

Answer 2

如以下答案 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

Answer 3

我使用prime ng ver 12.xx 在文件格式上为我覆盖这个确定.css(角度 cli

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