What is the Correct Way to Style a 3rd Party Component Without using ::ng-deep, /deep/, or >>> Combinators?

user_4971999 0
Viewed 1429

I've been looking for a definitive answer to this question for a long time. Is there a reliable and recommended alternative strategy to do this yet? Incorrect answers to this question include:

Just favor ::ng-deep for now

and

if component author didn't integrate styling into their API, you're out of luck

According to the docs, all 3 of these combinators are deprecated, so what's the "right way" of going about this?

Edit:

The answers suggesting using a strategy of global styling literally answer the question and are appreciated. However, Angular is a component-based framwork, and view encapsulation is one of the core boons that make it a valuable tool. To be fair to those providing an answer, this was not specified in the question. Still, the general use-case and desired behavior is to keep view encapsulation, so such a dramatic change in workflow is not a reasonable solution for the majority of cases, i.e. a "right way".

angular
4 Answers

You cannot place the style globally unless you want to change all the instances. Currently, there is no correct way to achieve what you ask.

The angular documentation states that /deep/ and >>> are deprecated. ng-deep, is deprecated too, but the documentation does not provide a way to achieve the desired goal to fix a 3rd party component instance in angular. The common practice inferred by the documentation is to use the deprecated ng-deep operator while the angular team figures out what to do.

Clearly, the user of ng-deep is not clean, but there is no alternative at the moment.

user_91393840

Add them to your global styles.

user_80053350

I'd agree with Christian that the best way is to add them to your global styles, since then you know they are global styles.

A similar method is to use encapsulation: ViewEncapsulation.None as a meta-tag on your Component. All this is really doing, though, is lazy-loading some global styles, which means once that component is created, those styles are applied globally across the site, even after the component is "destroyed".

I ran into a similar issue recently and ended up using ViewEncapsulation.None and then just writing very specific CSS selectors (e.g. #idTag > .third-party-class-1 > .third-party-class-2 > .third-party-class-4). This is brittle, as any shift of elements by the 3rd party library throws off your styling.

There is an open issue on angular that discusses this issue with ViewEncapsulation.None, so hopefully there is a resolution on it soon.

user_61578490

ng-deep has been deprecated for years, but is still the go-to solution I've seen in many production app. It's deprecated but that doesn't mean it will be removed - especially in this particular case

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

Note: be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

user_2710120
Related