[Fixed] PrimeNG Accordion: Programmatically change header and content styles

Issue

I’ve the following accordion group:

<p-accordion multiple=true>
    <p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab.myClass}}" header="{{tab.header}}"
        [selected]="false">
        {{tab.description}}
    </p-accordionTab>
</p-accordion>

It’s usually populated dinamically by tabs size. The goal is to have different background and other styles, depending of tab content. So I have that myClass style variable which could change at each accordion tab creation. E.g. assuming to use myClass = ‘myClass’:

:host ::ng-deep .myClass.p-accordion {
    .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
        background: red;
    }
}

Anyway I was not able to create a css rule to achieve this goal.
Can anyone assist?
Many thanks in advance

Solution

Solution was using a wrapper div of each accordion tab:

<p-accordion multiple=true>
    <div *ngFor="let tab of tabs" class="{{tab.customClass}}">
        <p-accordionTab header="{{tab.header}}"
            [selected]="false">
            {{tab.description}}
        </p-accordionTab>
    </div>
</p-accordion>

where :

.customClass * {
    background: red !important;
    //other properties
}