title: PrimeNG Calendar - Override the default style
body: <p>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.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.ui-calendar .ui-calendar-button {
      height: 34px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      width: 900em;
      border-left: 0 none;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="form-group col-xs-3 col-md-3"
                                       [ngClass]="{
                                       'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &amp;&amp;
                                       !ersaForm.get('effectiveDt').valid
                                       }"&gt;
                                      &lt;label for="effectiveDtId" class="control-label"&gt;Effective Date&lt;/label&gt;&lt;br /&gt;
  
                                      &lt;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'}"  &gt;&lt;/p-calendar&gt;
  
                                  &lt;/div&gt;
  </code></pre>
  
  <p>****************************************************UPDATE****************************************</p>
  
  <p>I changed my SCSS File to</p>
  
  <pre><code>::ng-deep .only-style-this .ui-calendar .ui-calendar-button { 
  height: 34px !important; 
  border-top-left-radius: 0 !important;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="form-group col-xs-3 col-md-3 only-style-this"
                                   [ngClass]="{
                                   'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &amp;&amp;
                                   !ersaForm.get('effectiveDt').valid
                                   }"&gt;
                                  &lt;label for="effectiveDtId" class="control-label"&gt;Effective Date&lt;/label&gt;&lt;br /&gt;
  
                                  &lt;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'}"  &gt;&lt;/p-calendar&gt;
  
                              &lt;/div&gt;
  </code></pre>
  
  <p><strong>warning</strong></p>
  
  <p>Validation (CSS 3.0): "::ng-deep" is not a valid pseudo-element.    </p>