Angular2's component's styles are not inherited in the encapsulated child component

I am writing two components – ComponentA and ComponentB, where ComponentA encapsulates ComponentB. Both of them have a p tag. In my ComponentA, I am writing styles: p { color:red } inside my @Component decorator. The ComponentA‘s p is changed to red but ComponentB‘s color remains black.

I think it’s a bug which needs to be resolved.

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

Style encapsulation (preventing style from bleeding into or out of components) is a main feature of Angular components. There are different options to achieve what you want @Component({ selector: 'component-b', styles: [` p { color: red; } `] ... encapsulation: ViewEncapsulation.None }) or you can change the CSS selector to cross component boundaries with the recently introduced (Angular2 only) shadow piercing CSS combinator >>> @Component({ selector: 'component-b', styles: [` :host ::ng-deep p { color: red; } `] ... }) The 2nd approach works with the default encapsulation (ViewEncapsulation.Emulated). You can’t use ::ng-deep (>>>) with encapsulation: ViewEncapsulation.Native. Support for >>> (or… Read more »

Jason
Guest

As mentioned in the accepted answer: this is not a bug. That said, here are two alternatives to inheriting parent styles: @Component({ styleUrls }) Adding the parent component style sheet to the list of styleUrls: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-child-component', templateUrl: './child.component.html', styleUrls: ['../parent.component.css', './child.component.css'] // ^^ Going up }) export class AppChildComponent implements OnInit { constructor() { } ngOnInit() { } } Preprocessor Imports (SCSS, SASS, LESS) You can also import parent styles using preprocessors. You’ll just need to adjust your project settings to use them: @import "../parent.component.sass" // .app-parent-component // border: 1px solid… Read more »

Jason
Guest

It is not a bug. Component styles normally apply only to the HTML in the component’s own template — reference If you want styles that you define in a parent component to affect ancestor components, I would use the use the /deep/ selector (which has the alias >>> as G√ľnter used in his answer) in the parent component, which will force the style down through all ancestor components. Note that this will apply the style to all view children as well as content children. @Component({ selector: 'component-a', styles: [`/deep/ p { color: red; }`] }) Plunker See also the Special… Read more »