Primeng: classes and styles

[loliparra80]

Hello:

I'm new in angular2 and I'm testing the library primeng, I like it a lot, by the way.

But I don't have exactly how to override actual classes or styles. For example, I want to use the component p-menu and I would like to change the border of content, giving a rounded border for example.

How can I do it? where and how to put the styles or classes? with input style, styleclass??

Thank you.

[marcelcremer]

Hey,

just have a look at the showcase (http://www.primefaces.org/primeng/). There you can see, that most components (not all yet) have the option to set a style attribute. You can use it like
[style]="{border:'1px solid black;'}" or [styleClass]="foobar".

You can find many examples there and in the code itself.

Happy Coding :)

[leexiaozheng]

i have the same problem

[loliparra80]

An example: [ngStyle]="{'margin-left': 2em'}"

[yuanyang536]

But styleClass can't be used. What's going on？

.side is a writing style

[arrinhzh]

I have the same problem

[yuanyang536]

I have solved, in the component side to write "encapsulation:ViewEncapsulation.None" is good

[JemarJones]

@MarcelCremer This is not working at all. Using the style attribute sets the styles on a chile span, but not on the input itself that needs to be styled (using p-calendar). and styleClass isn't doing anything whatsoever.

Edit: Nevermind.. as @yuanyang536 mentioned, the solution is ViewEncapsulation. See http://stackoverflow.com/a/38339123/4236924

[dhniels]

The only way I'm aware of to style PrimeNG's (or any other external component library such as ng-bootstrap) stuff within your component is to either:

1. set view encapsulation to none, or
2. to use angulars shadow piercing descendant combinator ::ng-deep

With ViewEncapsulation.None you could write a style for p-menu like:
.ui-menu {margin:0;}
and it would work, overriding the default PrimeNG style, since encapsulation is turned off.

With ViewEncapsulation.Emulated (Angular's default setting) in order to get the style above to work you have to "pierce" the view encapsulation as i mentioned. Here is the same style but with shadow piercing:
:host ::ng-deep .ui-menu {margin:0;}

i currently use the shadow piercing method in my project because i feel that turning off encapsulation is disabling one of the greatest features of the Angular framework - the ability to keep everything contained and modular.

Hopefully in the near future the browsers (looking at you, IE and Firefox) will finally finish their implementation of the Web Components standard, including the Shadow DOM. Learn more about the Shadow DOM and Angular's ViewEncapsulation here.

[Mrtcndkn]

Please try with the latest PrimeNG version and comment if the issue still persists.

[orendin]

Hi all

I just found that for my style to be applied, I have to add the class as a string literal:
<p-tree [value]="rootNodes" selectionMode="checkbox" [styleClass]="'tree-container'">
Mind the extra quotes around the custom class.

For me, no change to ViewEncapsulation was necessary.

[dhniels]

but as far as i understand it from my experience, using styleClass only applies it to the parent component (in your case the p-tree element.) It doesn't work however if you're trying to target the elements _inside_ the component because the markup is rendered in the DOM. So you have to use the other methods (view encapsulation, shadow piercing) to access and override those internal styles. correct me if I'm wrong?

[orendin]

@dhniels Yes, as far as I can tell, this is correct.
There are often styles you can set on the data elements (like the TreeNodes in the Tree widget), but the elements between the parent and the nodes cannot be styled as easily.

[lucastheisen]

@orendin , correct me if i am wrong, but isn't [styleClass]="'tree-container'" the same as styleClass="tree-container"? The first is a value binding to your component, but then using string literal value, the second just sets the property to the string value (_no binding_)...

[lucastheisen]

@dhniels , prolly worth mentioning that your approach is frowned upon (_and deprecated_):

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

It is probably _safest_ to create a component just to wrap the component you want to customize and set it to ViewEncapsulation.None. Then you can use absurd names (like SMACSS, BEM, or OOCSS) for your classes so as to reduce the likelihood of a collision...

[YegorKh]

If someone need to use [style] - this is the way [style]="{ 'vertical-align' : 'top' }"
In my case it work without ViewEncapsulation.None

[ladygarnet00]

i have the same problem with p-calendar. Style works on p-dropdown, but not with p-calendar. It pass the styleClass to the first span, and i need to pass it to de input of the calendar.
At picture, the styleClass that i need on input is "is-invalid".

EDIT: ViewEncapsulation.None didnt work for me.

[sree332]

I see the same issue , with p-calendar, I want to change the input tex feild padding , i tried all of the above and doesn't work..

[Jamates]

using :host /deep/ .ui-menu {margin:0;} in my css class fixed the problem for me
:host /deep/ ... allows you to style child components
Thanks a lot for the answer

[dhniels]

FYI, /deep/ has now been replaced by ::ng-deep.

I use :host ::ng-deep all over the place to override prime styles

[Jamates]

@dhniels thank you for the information, didn't know there was this option
i am fairly new to Angular so i'm glad to hear tons of new Information :)

[tony-gutierrez]

Is there not official way ngprime offers to style their stuff on an per component level? Seems kind of like a big pain in the ass.

[SSTPIERRE2]

Please note that as of 2019, the use of any form of /deep/ selectors is deprecated and will eventually not function. That being said, PrimeNG docs are lacking any sort of documentation on how to style child elements of their components. In my experience now the only option if you want to style the child elements of a PrimeNG component you must put those classes in a root css file (in angular.json).