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

Question

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".

Answer 1

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.

Answer 2

Add them to your global styles.