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：

组件样式通常仅适用于组件的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的问题，我们可以简单地在父元素的顶部添加一些填充；-）

PrimeNg styleClass不会更改p面板的样式

2 个答案: