PrimeNg styleClass不会更改p-panel的样式 [英] PrimeNg styleClass not change style of p-panel

问题描述

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

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

<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样式应用于子组件，请使用 :: ng-deep .有关演示，请参见此stackblitz .

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

根据 Angular文档:

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

Component styles normally apply only to the HTML in the component's own template.

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

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.

仅在模拟视图封装中使用/deep/，>>>和:: ng-deep.默认情况下，最常用的视图封装是模拟".

Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation.

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

... ::ng-deep should be preferred for a broader compatibility with the tools.

---

另一种解决方案是将组件的视图封装设置为 ViewEncapsulation.None .

另一种选择是在 styles.css 中全局定义样式，如

Another alternative is to define the style globally in styles.css, as shown for the second panel in the stackblitz.

这篇关于PrimeNg styleClass不会更改p-panel的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！