Angular 2, global css file for all components including nested components -
<div> <h2>hello {{name}}</h2> <first> first comp <child> child </child> </first> <second> second comp </second> </div> , , 3 components. i'm trying put common css file across components. able others except component. tried encapsulation: viewencapsulation.none too.
the problem not using :host /deep/ have couple of huge css files acts theme (3rd party). cannot modify adding /deep/ them
i tried include css file in index.html see same issue. nested components, css not being applied.
here plunker link: https://plnkr.co/edit/5cbm2rjgu7s9q4otqnby?p=preview
child can see stands out when compared other h2 elements.
could of please help?
since <child> component inside component, applies styles of <h2> on <h2> , scales heading inside <child> component 1.5em. although <h2><h2>heading 2</h2></h2> should work shown here, not sure why not work in angular app.
in case, need in order apply styles on child component:
h2 h2 { font-size: 1em; } also, global styles should go inside styles.css file. don't need shared.css file, in way view encapsulation not required. have removed app.ts in plunker demo.
have @ updated plunker demo.
Comments
Post a Comment