Primeng: PrimeNG themes leak global styling

[kormide]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-g1quqa

Current behavior
PrimeNG themes globally style links and make every element use border-box sizing. This can cause styling issues for custom or third party components that are outside of PrimeNG's control.

Expected behavior
PrimeNG themes only affect explicitly declared PrimeNG components/directives/classes.

• Angular version: 7.X

• PrimeNG version: 7.X

• Browser: [all]

[cagataycivici]

Invalid issue.

[kormide]

This is absolutely a valid issue. PrimeNG is assuming that it's the only component library in use. Other design systems (see material) are careful to isolate their styling and theming to the components they own.

[jbedard]

I'm having this issue too. I think this is a valid issue

[jbedard]

@cagataycivici can you explain why you don't think this is an issue? In my case this is breaking the use of other libraries alongside primeng.

[KensingtonTech]

For the benefit of others whose apps were broken by this behaviour, I un-broke this by adding this to my styles.css (YMMV):

/* undo PrimeNG's global change */
* {
  -moz-box-sizing: initial;
  -webkit-box-sizing: initial
  box-sizing: initial;
}

/* re-apply only for PrimeNG elements */
[class^="ui-"] {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

[antch]

@cagataycivici This is absolutely a valid issue, I honestly cannot believe that anyone would think it isn't. In my case (LESS) I had to create a custom plugin that removes the body top-level selectors from the theme.css, and then scoped the import inside of a top level element selector. I'm only using p-table, so it would be like:

@plugin 'less-plugins/primeng-theme-scoping-plugin';

p-table { /* more element selectors could be added here */
  @import (less) '~primeng/resources/primeng.min.css';
  @import (less) '~primeng/resources/themes/nova-light/theme.css';
}

I think the easiest fix for the PrimeNG team would simply be to add descendant selectors for the PrimeNG tags in the theme.css files (as seen above), or at least remove the parent body selectors to allow us to easily scope the styles ourselves using a CSS pre-processor.

[asmith2306]

Why is this issue closed?? I use a Material theme and the primeng nova-light theme in my app. This broke a part of my app and I was scratching my head until I found it. Don't apply global styles!

[mralbobo]

This "thing" gets even more ridiculous when you see that that primeng.min.css defines this rule:
.ui-widget, .ui-widget * { box-sizing: border-box; }

...which for my app at least already seems to border-box everything it actually needs to.
It's just theme.css polluting for no obvious reason.

[ramtob]

Also having this problem