PrimeNg styleClass 不会改变 p-panel 的样式答案

【问题标题】：PrimeNg styleClass not change style of p-panelPrimeNg styleClass 不会改变 p-panel 的样式
【发布时间】：2019-02-22 19:59:57
【问题描述】：

我正在使用 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;
}

【问题讨论】：

标签： css angular primeng

【解决方案1】：

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

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

根据Angular documentation：

组件样式通常只适用于组件的 HTML 自己的模板。

使用 /deep/ 穿透阴影的后代组合器来强制样式通过子组件树向下进入所有子组件意见。 /deep/ 组合器适用于任何深度的嵌套组件，它适用于视图子项和内容子项组件。

仅在模拟视图封装中使用 /deep/、>>> 和 ::ng-deep。 Emulated 是默认且最常用的视图封装。

... ::ng-deep 应该是首选，以便与工具。

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

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

【讨论】：

非常感谢。有效。但为什么我必须这样做？我应该为每个primeng组件样式做吗？ @ConnorsFan
我添加了来自 Angular 文档的解释和替代解决方案。
@ConnorsFan 你改变了 stackblitz 吗？我在提供的链接中没有看到 ng-deep 部分。

【解决方案2】：

另一种解决方案是使用<p-panel>元素的父元素。所以，

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

我们可以简单地有一个类：
.panel-container div.ui-panel-titlebar { .. }
和/或
.panel-container div.ui-panel-content { .. }
顺便说一句，要解决@HasanOzdemir 的问题，我们可以简单地在父元素的顶部添加一点填充；-)

【讨论】：