title: How can I add styles to elements inside p-dialog?
body: <p>I tried to add styles to elements inside the <code>p-dialog</code> element but looks like the styles don't get applied due to Angular's CSS encapsulation.</p>
  
  <p>How can I add styles to the elements inside the <code>p-dialog</code> without changing my app's CSS encapsulation properties?</p>
  
  <p><strong>Edit -</strong></p>
  
  <pre><code>&lt;p-dialog [(visible)]="display" modal="modal" width="788" [responsive]="false"&gt;
      &lt;p-header style="float:left"&gt;
          New Item
      &lt;/p-header&gt; 
  
      &lt;div style="float:left;"&gt;
      &lt;/div&gt;
      ...
      ...
  
  
      &lt;p-footer&gt;
          &lt;button type="button" (click)="display=false"&gt;Save&lt;/button&gt;
          &lt;button type="button" (click)="display=false"&gt;Cancel&lt;/button&gt;
      &lt;/p-footer&gt;
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>I want to apply styles to the <code>Save</code>and <code>Cancel</code> buttons. and the content in the <code>p-dialog</code>.</p>