CODEWITHSUNDEEP
angulartypescriptsass
Hassan
Hassan

Reputation: 2408

Styling a child component differently in another component

I am trying to style my alert box (from bootstrap) [which is also a component] slightly different when it shows up in one of my components. For the other places i would like to use its default styling.

I am able to achieve what i want by using:

encapsulation: ViewEncapsulation.None in my parent component. However i really want to avoid it and learn to do it using best practice.

Can anyone shed some light of how can this be achieved without modifying encapsulations ?

In some posts users mention to use :host and ::content css properties but so far i am unable to make any use out of them.

I believe this is a very common scenario and there should be a good way to do it.

Upvotes: 0

Views: 104

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657406

You can use /deep/ in the parent like

:host /deep/ some-grand-child {
  color: blue;
}

to make selectors cross component boundaries without setting ViewEncapsulation to None.

Upvotes: 1

Related Questions