By Pardeep Jain


2016-10-19 12:16:27 8 Comments

i want to overright the style of primeng components as per component level not for whole app, either i have to change the style in main theme.css file or inline style, but seems inline not works sometimes as expected let suppose as example i have to use

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>

and i have to change the style of class ui-dropdown-item class name as per documentation.

i need same component with two diff style what is the best approcah for the same ? if anyone having working example please add the link.

5 comments

@jcdsr 2018-01-03 15:11:04

Try using

:host >>> .ui-dropdown-item {...}

you won't need any surrounded div or adding the styles to the main style.css

@Dean 2018-05-10 18:35:19

Simple, sweet, sufficient.

@Dave 2017-04-21 20:59:24

The only way to do this that I'm aware of is by using the :host and ::ng-deep, called "shadow piercing CSS combinators"

You could enable ViewEncapsulation.Native to employ the Shadow DOM, but my understanding is its not widely supported yet. Chrome and Safari support it, I think Firefox might be there, but IE is still a ways off from adding the feature.

Good article about View Encapsulation in angular here, and a good post about shadow piercing here. You can also view the documentation on this from the Angular team here

In my application im using PrimeNG as well. Since I'm importing a primeNG component into, lets call it MyComponent, that means the styles applied to MyComponent will be encapsulated and wont apply to the primeNG UI elements im incorporating. Shadow piercing combinators allow me to "pierce" through Angular's "emulated" Shadow DOM to style the PrimeNG stuff, but it seems a little messy and not ideal. I've looked for a way around this but I'm not aware of anything.

@Aravind 2017-04-21 21:48:47

Every component is provided with the set of styling classes, using them you can modify the styles, For instance

 <p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

And the corresponding styles will be as

.ui-dropdown    {
  background-color:black;
}
.ui-dropdown-label  {
  color:white;
}

.ui-dropdown-label:hover{
  color:red
}
.ui-dropdown-item   {
  color:white;
  background-color:black;
}

LIVE DEMO

@Crying Freeman 2017-09-04 21:08:02

How to make Primeng components like dropdowns and textboxes contained on <td> elements transparent?. The td background color will give the color to the primeng component

@jcdsr 2018-01-03 15:00:30

your solution doesn't work, the new styles are in the main style.css, I looking as well to change the primeng styles from the angular style file component, which injects the style into the head

@Aravind 2018-01-03 15:01:04

did you get a chance to look at the Live Demo

@velsim 2017-03-07 15:06:06

Disable view encapsulation in your component, and then add the styles,

@Component({
 selector: 'new-employee-flow',
 templateUrl: './app/components/my.html',
 styleUrls: ['./app/components/my.css'],
 encapsulation: ViewEncapsulation.None
})

@Pardeep Jain 2017-03-07 17:30:26

By doing so you have to style each component every time you use , this is too much lengthy and not suitable process.

@Crying Freeman 2017-11-22 21:23:18

Too hard as solution

@Alexander Ciesielski 2016-10-19 12:50:07

You want to wrap your component in a div with some specific class.

<div class="myOverride">

Now in your style.css you target the primeng component this way:

.myOverride .ui-dropdown-item {...} 

This way only the wrapped component gets styled.

@Pardeep Jain 2016-10-19 13:55:03

firstly thanks for the answer, actually this is not working also this is not best way is there any other option for the same ?

@jmcmichael 2017-03-24 18:48:02

Since Angular now uses emulated ViewEncapsulation, this method will not work in some cases, including when the component generates elements at runtime. I've solved this problem by using the :host and /deep/ selectors. :host selects the component's root element, and /deep/ applies child selectors to every child element. More detail on :host and /deep/ here: angular.io/docs/ts/latest/guide/… What this looks like in practice is simply adding :host: /deep/ to the parent selector in your component's .scss file.

@Nitesh 2018-02-19 15:17:05

@jmcmichael I am trying to override styles of a pre-defined component in my custom component and as you pointed out, the pre-defined component is generating elements at runtime. How can I override style of these elements from my component?

@Nitesh 2018-02-19 15:21:02

Never mind, I have solved it using stackoverflow.com/a/48080102/729768

Related Questions

Sponsored Content

4 Answered Questions

[SOLVED] PrimeNG datatable custom css

0 Answered Questions

PrimeNg component inside PrimeNG component

  • 2017-12-15 09:29:45
  • Luczi
  • 156 View
  • 0 Score
  • 0 Answer
  • Tags:   angular primeng

1 Answered Questions

2 Answered Questions

[SOLVED] Override primeng css classes in Angular

1 Answered Questions

[SOLVED] Primeng Component UI issues

1 Answered Questions

[SOLVED] Style through components not created

1 Answered Questions

[SOLVED] PrimeNG - styling size and alignment of p-panel

  • 2017-05-24 02:44:10
  • skinny_jones
  • 4580 View
  • 1 Score
  • 1 Answer
  • Tags:   css angular primeng

2 Answered Questions

2 Answered Questions

2 Answered Questions

[SOLVED] Angular2 Components - Dynamic Inline Styles

Sponsored Content