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 ;-)