Primeng的P-Card组件简单地赢了CSS更改

Question

我需要在应用程序中动态更改P-Card组件。但这根本不起作用... 我到目前为止尝试过的是我尝试过的：

<div class="card-image-comp">
            <p-card [class.activeCard]="profileCardSelected === 1" (click)="selectProfileType(1)">
                <img src="../../../assets/icons/person.png">
            </p-card>
            <p>Paciente</p>
</div>
<div>
            <p-card [class.activeCard]="profileCardSelected === 2" (click)="selectProfileType(2)">
                <img src="../../../assets/icons/estetoscopio.png">
            </p-card>
            <p>Profissional de Saúde</p>
</div>
...
My function:
    selectProfileType(numCard: number){
        this.profileCardSelected = numCard;
    }

这部分工作正常，问题是该组件并不遵守新课程。

我已经尝试了普通的事情：

.activeCard {
  background-color: black;
}

... 
div {
  .activeCard {
    background-color: black;
  }
}

... 
.personalCardComp {
  .activeCard {
    background-color: black;
  }
}

... and even some nasty stuff
:host {
  ::ng-deep .activeCard {
    background-color: black;
  }
}

...
:host {
  ::ng-deep p-card.p-element.activeCard {
    background-color: black;
  }
}

正如我之前说的，该课程正确地应用了，但是当我将CSS应用于P-Card的Div儿童时，该卡仅更改...

i.sstatic.net/e9xtx.png“ rel =“ nofollow noreferrer 如果我可以将班级应用于这个div的孩子，那就可以了...有没有办法这样做？将课程应用于p-card，但div子女obbey ...

Answer 1

确保正确导入您的 .scss 文件，然后：

:host ::ng-deep {
  .p-card.p-component {
    background: black;
  }
}