score:2

Accepted answer

The option mentioned by @Yakov Fain would work, but using ViewEncapsulation.None has other side effects, so read up on those if you want to go that route.

This question has come up before with Angular 2 and d3. You can use shadow piercing style selectors e.g.

:host /deep/ h3 {
  font-style: italic;
}

We can use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies both to the view children and the content children of the component. The /deep/ selector also has the alias >>>. We can use either of the two interchangeably.

Read more about these special selectors here: https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors

score:1

By default, Angular 2 emulates Shadow Dom ( encapsulation:ViewEncapsulation.Emulated) so the styles of your component don't leak out to the DOM. Turn it off by adding this line to the template of your component: encapsulation:ViewEncapsulation.None


Related Query

More Query from same tag