How to apply styles to component-B from component-A stylesheet in Angular-Cli without making styles apply globally?

Question

I have two Angular components:

@Component({
    selector: ‘component-a’,
    templateUrl: './component-a.html',
    styleUrls: [ ‘./component-a.scss' ],
})

@Component({
    selector: ‘component-b’,
    templateUrl: './component-b.html',
    styleUrls: [ ‘./component-b.scss' ],
})

In component-a HTML:

<div class=“cmp-a-container”>
    component A
    <component-b></component-b>
</div>

and in component-b HTML:

<div class=“cmp-b-container”>
    component B
</div>

component-b is reused inside other components. But when component-b is used inside component-a I want it to have a set of specific styles applied on the .cmp-b-container class.

If I add the following code into component-a.scss,

.cmp-a-container {
  .cmp-b-container { /* Styles here */ }
}

The styles won’t apply. I believe this is how Angular works.

So my solution to this is, adding the styles on the styles.scss (the global sass file).

Is this the right way to do this or is there a way to apply styles specified in component-a’s stylesheet to component-b’s inner html when it’s wrapped by component-a?. Why has Angular not made this possible?

I'm using Angular-Cli and Sass.

duplicate of this https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — Sachin, Mar 23 '18 at 08:39

score 2 · Accepted Answer · answered Mar 23 '18 at 08:43

you should use ::ng-deep so that your styles propagates to child components, see https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

It should go something like this:

.cmp-a-container ::ng-deep{
  .cmp-b-container { /* Styles here */ }
}

How to apply styles to component-B from component-A stylesheet in Angular-Cli without making styles apply globally?

1 Answers1