title: How to style PrimeNg properly in Angular app
body: <p>I am trying to change the style of PrimeNg accordion in my component: <a href="https://primefaces.org/primeng/showcase/#/accordion" rel="nofollow noreferrer">https://primefaces.org/primeng/showcase/#/accordion</a> Simple changes, like font-style, color changes... etc. The page says I can pass a style with <em>styleClass</em>. That does not work for me.</p>
  <p>In my component I could remove the shadow the following way:</p>
  <pre><code>::ng-deep .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
    box-shadow: none;
  }
  </code></pre>
  <p>As I know its not recommended to use ng-deep. Without the ng-deep nothing happens unless I put the CSS into a &quot;global&quot; CSS file. But then it's not just changed in my own component.</p>
  <p>Also the CSS selector is crazy long, obviously I copied from the inspector.</p>
  <p>What is the right way to set the style of a PrimeNg element?</p>
  <p>Thank you</p>