css - PrimeNg styleClass 不会改变 p-panel 的风格

Question

我正在使用 primeNg。我的 .html 和 .scss 文件如下所示。但是我不能给 p-panel 任何 styleClass。我的代码有什么问题？

.html文件

<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文件

.test {
  margin-top: 50px;
}

Answer 1

要将 CSS 样式应用于子组件，请使用 ::ng-deep。参见 this stackblitz用于演示。

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

根据 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.

---

另一种解决方案是设置 view encapsulation组件的 ViewEncapsulation.None。

另一种方法是在 styles.css 中全局定义样式，如 stackblitz 中的第二个面板所示。 .