PrimeNG 造型/主题答案

【问题标题】：PrimeNG styling/themingPrimeNG 造型/主题
【发布时间】：2017-07-29 18:01:33
【问题描述】：

寻找有关如何更改 primeNG 面板组件背景的样式/主题的建议。

我尝试在我的 scss 文件中使用以下名称覆盖组件。然而这并没有奏效。内联我试过了

<p-panel header="Test" [style]="{'background': '#20A8D8 '}" [toggleable]="true">

它只是改变了组件的背景，而不是标题。想知道是否有人对任何组件进行了 stlyed/skinned 并可以帮助向我解释如何做到这一点。

这些可用于面板 - 只是不确定如何访问/覆盖它们：

ui-panel 容器元素。 ui-panel-titlebar 标题部分。 ui-panel-title 面板的标题文本。 ui-panel-titlebar-toggler 切换图标。 ui-panel-content 面板的内容。

谢谢

【问题讨论】：

【解决方案1】：

很简单，将它们用作 css 文件中的类，如下所示：

.ui-panel-title { // Your css code for Title text of the panel. }

希望对你有帮助

【讨论】：

【解决方案2】：

使用 styleClass 属性覆盖 PrimeNG 组件的样式，并且您必须将您的样式放在根 style.css 或 styles.scss 中（如果您使用的是 SCSS）。

我的样式覆盖 PrimeNG 面板页脚样式：

.editClientPanel .ui-panel-footer {
background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%);

}

希望它有所帮助，或者如果你已经解决了这个问题，希望你学到了一些你没有学到的东西。

【讨论】：

【解决方案3】：

我在样式类之前使用 :host::ng-deep 覆盖primeng 样式。

:host::ng-deep .styleClassName{ 背景颜色:#005DAA; }

【讨论】：