PrimeNg styleClass not change style of p-panel

Question

I am using primeNg. My .html and .scss file like below. But I can't give any styleClass to p-panel. What is wrong in my code?

.html file

<p-panel header="Student Info" styleClass="test">
    <div class="ui-g">
      <div class="ui-g-12 ui-md-3">
        <div class="ui-g-12">
          <b>Student</b>
        </div>
       </div>
  </p-panel>

.scss file

.test {
  margin-top: 50px;
}

Answer 1

To apply a CSS style to a child component, use ::ng-deep . See this stackblitz for a demo.

:host ::ng-deep .test {
  margin-top: 50px;
}

According to Angular documentation :

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation.

... ::ng-deep should be preferred for a broader compatibility with the tools.

---

An alternative solution is to set the view encapsulation of the component to ViewEncapsulation.None .

Another alternative is to define the style globally in styles.css , as shown for the second panel in the stackblitz .

Answer 2

One more solution is to use the parent element of <p-panel> element. So for,

<div class="panel-container">
   <p-panel>
     ..
   </p-panel>
 </div>

We could simply have a class as:
.panel-container div.ui-panel-titlebar { .. }
and/or
.panel-container div.ui-panel-content { .. }
BTW to fix @HasanOzdemir's problem we could simply add a little padding to the top of parent element ;-)