【问题标题】: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】:

    另一种解决方案是使用&lt;p-panel&gt;元素的父元素。所以,

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-10-24
      • 2020-05-11
      • 1970-01-01
      • 2021-11-21
      • 1970-01-01
      • 2021-11-04
      • 2022-01-23
      • 1970-01-01
      相关资源
      最近更新 更多