css Question posted in
Some basic documentation can be found here.

Css – How to change background-color of `p-card` component in PrimeNG 18?

I am trying to change the background color of the container of p-card component.

For context, I am brute forcing to change some styling in primeng components just to see if I will be able to have that flexibility just before diving into a project. The problem is, sometimes I can style the components the way I want to, sometimes I don’t know how and why the specifity in css don’t work.

This works:

p-button { 
  margin: 1rem;
}

But not this:

p-card div.p-card-body { 
  background-color: purple;
}

Even specifying !important dont work.

Versions: Angular 18 && PrimeNG 18.0.0-beta.2

Can anyone help? I have not seen some good guide on the internet.

Tags:

2

Answers


  1. 0

    One way to increase the specificity in CSS when !important doesn’t work is to repeat the class name, you can try this:

    .p-card.p-card div.p-card-body.p-card-body { 
  background-color: purple !important;
}
    Login or Signup to reply.
  2. 0

    in the primeng library you can make use of the [style] property to change the color or even inject style to the plugin
    ie,

    <p-card header="Simple Card" [style]="{ background: 'purple' }" >
  <p class="m-0">
      Lorem ipsum dolor sit amet...
  </p>
</p-card>

    here the [style]="{ background: 'purple' }" will do the action needed here.

    im adding a stackblitz example here for clarity here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search