CODEWITHSUNDEEP
angularprimeng
rafaelpadu
rafaelpadu

Reputation: 1672

Can't apply any style to any component in PrimeNG

i'm having quite a troublesome experience with PrimeNG because I simply can't apply any kind of CSS, whatsoever... And this happens with the card component, dropwodnw, multislect etc.. My most recent issue is a dropdown that won't accept width 100%. I've tried class="etc", styleClass="etc", id="etc". I've seen this ng-deep guy but, like... everytime I want to make the slightest change I need to call this ng-deep??

Another question, what do I do with this thing?

enter image description here

I've tried calling these guys in every imagenable way I can think of... But NOTHING ever happens... Maybe I'm that stupid hahah...

How would I make this guy here accept a width: 15rem; for example...?

<span class="p-float-label dropdown">
         <p-dropdown styleClass="dd-style" id="formacaoAcademica" [autoDisplayFirst]="false" name="formacaoAcademica"  [options]="academicFormationOptions" formControlName="formacaoAcademica"></p-dropdown>
         <label for="formacaoAcademica" >Selecione sua formação acadêmica</label>
</span>

Upvotes: 0

Views: 2714

Answers (1)

MikeJ
MikeJ

Reputation: 2324

Yes, to pierce through Angular's view encapsulation, you need to include ::ng-deep in your CSS selectors.

And you would probably want to prefix that with :host so the style rule is restricted to your component that's hosting the PrimeNG component and not applying globally to all instances of that PrimeNG component throughout the app (unless that's what you really want).

So, in your component's CSS, you would add something like this:

:host ::ng-deep .p-dropdown {
  width: 15rem;
}

If you inspect the component's styles, you'll see that the generated CSS looks something like this:

[_nghost-ddk-c55] .p-dropdown {
  width: 15rem;
}

Angular encapsulates the style to just your component with [_nghost-ddk-c55], but then applies the style to all .p-dropdowns within your component.

By comparison, if you didn't include :host, you would have this CSS rule, styling all .p-dropdowns globally throughout your app because ::ng-deep essentially strips any view encapsulation from the selectors:

.p-dropdown {
  width: 15rem;
}

Here's a StackBlitz showing this working (with :host included).

Using ::ng-deep is just part of adding your own custom styling to third-party components in Angular.

The alternative is to put those styles in a global stylesheet defined in the styles section of your angular.json, which removes them from any view encapsulation, so ::ng-deep would not be needed.

Upvotes: 2

Related Questions