如何使用 CSS 在 Angular2 中的任何 PrimeNG 模塊上更改顏色？

Question

我正在處理一個 Angular2 項目，我的應用程序主要是使用由創建 PrimeFaces 的同一家公司提供的 PrimeNG 框架構建的。

我遇到了一個問題，我想自定義手風琴面板的顏色和整體外觀，但我不知道如何使用 styleClass 屬性來完成它。

我應該在哪里設置？ 如果我這樣做，WebStorm 似乎不喜歡它：

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

此外，我很想知道我應該如何制作我的 CSS 以使其工作？

感謝您的投入！ :)

Answer 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"
]

希望能幫助到你！

Answer 2

如果您正在尋找簡單的 ngClass 解決方案，這里有一個小例子

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

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