1

I was trying to override one of the default style on the primeng card but some reason when I use the scss file, style is not applied. Below is the code I tried and same code works on the css file.

I have below code on template

        <p-card>
            <app-component></app-component>
        </p-card>

and tried this on scss file

:host >>> .p-card .p-card-body {
    padding:  0.5rem;
}

and I have this on appComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Same style works when I used the css but not working on scss file. Is there any thing else I have to do for it?

LilRazi
  • 690
  • 12
  • 33

3 Answers3

3

you can custom most of primeng components style by set a class as parent class for the component with styleClass after that you can overrate component element classes

template

<p-card styleClass="ngx-color">
  <app-component></app-component>
</p-card>

example style.scss

.ngx-color {
  &.p-card {
    border-radius: 1rem;
    overflow: hidden;
  }

  .p-card-title {
  }
  .p-card-body {
    padding: 2rem !important;
    background: #a6120d;
    color: #fff;
  }
}

demo

check this primeng theming

each component have different set of class you check these class at style section of official component documentation page as example card.

Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
  • Thank you for your comment but some reason I moved the same style code to app.component.scss style file and it is not working. I have rename your app.component.css with scss and also added the template Url on ts file. Just to make sure I have added the another div and changed the color that is working but card style is not. https://stackblitz.com/edit/primeng-card-demo-bxddn9?file=src%2Fapp%2Fapp.component.scss – LilRazi Nov 02 '20 at 14:54
  • if you move the style to component style file you need to set `encapsulation` to `none` https://stackblitz.com/edit/primeng-card-demo-aispka?file=src%2Fapp%2Fapp.component.ts – Muhammed Albarmavi Nov 02 '20 at 15:05
  • I think it is not required if use host. Here I am doing without setting encapsulation to none but css file. https://stackblitz.com/edit/primeng-card-demo-c8ywzu?file=src%2Fapp%2Fapp.component.css. Looking for same but on scss file – LilRazi Nov 02 '20 at 15:23
  • if you don't use custom class then you don't need to set encapsulation to none – Muhammed Albarmavi Nov 02 '20 at 15:43
  • I will not recommend this way `host >>> .p-card .p-card-body {}` because it not reusable but the result is the same – Muhammed Albarmavi Nov 02 '20 at 15:46
0
:host {
  ::ng-deep .p-card .p-card-body {
    padding:  0.5rem;
  }
}

Just copy and paste this in your scss file.

girlyProgrammer
  • 1
  • 1
0

I faced the same issue and I found the solution, first thing set ViewEncapsulation to none of ts file, and just add .p-card.p-component .p-card-body { ......./ }

Ramy Ragab
  • 129
  • 9