我使用角度,在组件中使用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>
*************************************************** ***** UPDATE ********************************************
我将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”不是有效的伪元素。
答案 0 :(得分:0)
您无法调整子组件的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”类中,然后执行以下操作:
::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
...
}
或者,prime-ng通常允许您将样式及其大部分组件传递进来。
如果您查看docs,将会发现有一个可以使用的样式属性。您可能还想使用其他属性,例如inputStyle。