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文档：

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

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

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

... ::ng-deep 应该是首选，因为它具有更广泛的兼容性 工具。

---

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

ViewEncapsulation.None

。

另一种选择是在

styles.css

中全局定义样式，如 stackblitz 中的第二个面板所示。

Answer 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 的问题，我们可以简单地在父元素的顶部添加一点填充;-)

Answer 3

我这样做的方法（删除 p-panel-content 中的底部填充 - 在本例中）是在 html 中添加一个新的样式类 p-panel-no-padding-bottom 到 p-panel-no-padding-bottom 的 styleClass -面板我想影响..

的风格

<p-panel header="Panel Header" styleClass="p-panel-no-padding-bottom">

或者

1. 在全局CSS中

.p-panel-no-padding-bottom .p-panel-content {
  padding-bottom: 0;
}

2. 或在应用程序组件CSS中

:host /deep/ .p-panel-no-padding-bottom .p-panel-content {
  padding-bottom: 0;
}