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

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -