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

Question

I am working on an Angular2 project and my application is mostly built with the PrimeNG framework delivered by the same company that creates PrimeFaces.

I ran into a problem, where I want to customize the colors and the overall appearance of an Accordion panel, and I can't figure out how to get it done with the styleClass property.

Where should I set it? WebStorm doesn't seem to like it if I do it this way:

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

Furthermore, I'd love to know how should I craft my CSS in order to make it work?

Appreciate your input! :)

Answer 1

I am working with primeng as well and the way it should work based on your example is the following:

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

BUT there are a lot of bugreport that styleClass is not working properly. So I advise you to use the default style classes primeng defines:

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

so using them like this in style.css is working for me:

.ui-accordion {
  width: 500px
}

You can define your .css file in your angular-cli.json the following way:

"styles": [
        "styles.css"
]

Hope it helps!

Answer 2

if your looking for easy ngClass solution here's a small example

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

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