如何使用 CSS 更改 Angular2 中任何 PrimeNG 模块的颜色？答案

【问题标题】：How to change colors on any PrimeNG module in Angular2 using CSS?如何使用 CSS 更改 Angular2 中任何 PrimeNG 模块的颜色？
【发布时间】：2017-10-10 18:05:54
【问题描述】：

我正在处理一个 Angular2 项目，我的应用程序主要使用由创建 PrimeFaces 的同一家公司提供的 PrimeNG 框架构建。

我遇到了一个问题，我想自定义 Accordion 面板的颜色和整体外观，但我不知道如何使用 styleClass 属性来完成。

我应该在哪里设置它？如果我这样做，WebStorm 似乎不喜欢它：

<p-accordionTab header="Personal Information" styleClass="myStyleClass">
Content
</p-accordionTab>

此外，我很想知道我应该如何制作我的 CSS 以使其正常工作？

感谢您的意见！ :)

【问题讨论】：

你有答案吗？

标签： css angular primeng

【解决方案1】：

我也在使用primeng，根据您的示例，它的工作方式如下：

p-accordionTab.myStyleClass {
  width: 500px;
}

但是有很多关于 styleClass 不能正常工作的错误报告。所以我建议你使用primeng定义的默认样式类：

ui-accordion
ui-accordion-header
ui-accordion-content

所以在 style.css 中这样使用它们对我有用：

.ui-accordion {
  width: 500px
}

您可以通过以下方式在 angular-cli.json 中定义 .css 文件：

"styles": [
        "styles.css"
]

希望对你有帮助！

【讨论】：

@balag3 我已经尝试过你的方法，但这对我不起作用。我花了将近 2 个小时。

【解决方案2】：

如果您正在寻找简单的 ngClass 解决方案这是一个小例子

(..)
<p-accordionTab [selected]="true" [ngClass]="elementFilter ? 'highLightFoundElement' : ''">
(...)

:host ::ng-deep .highLightFoundElement > div > a{
    background-color: blueviolet !important; //your choice colour
}

【讨论】：