PrimeNG Calendar - Override the default style

Question

Using angular, I am using p-calendar in a component and created a CSS class that is called from my component. No matter what I do I am unable to override the style.

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

I changed my SCSS File to

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

warning

Validation (CSS 3.0): "::ng-deep" is not a valid pseudo-element.

danday74 danday74 · Accepted Answer · 2018-10-09T14:37:44

You can't tweak a child component's css, it breaks encapsulation. This will work but is 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;
}

This is essentially the same as adding it to your global stylesheet. However, the global styles will be applied only when the component has loaded for the first time, making it uber crappy. For safety, you can wrap your component in an "only-style-this" class and do:

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

Alternatively, prime-ng usually allows you to pass styles in with most its components.

If you look at the docs you will find that there is a style property you can use. There are also other properties you might want to play with like inputStyle.

PrimeNG Calendar - Override the default style

2 Answers