CODEWITHSUNDEEP
angularsassprimeng
LilRazi
LilRazi

Reputation: 770

override primeng default style with scss file

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?

Upvotes: 3

Views: 8722

Answers (3)

Ramy Ragab
Ramy Ragab

Reputation: 129

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 { ......./ }

Upvotes: 0

girlyProgrammer
girlyProgrammer

Reputation: 19

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

Just copy and paste this in your scss file.

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

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.

Upvotes: 4

Related Questions