Angular css style child from parent

Question

I've got a question:

considering the following structure

<component-parent>
  <first-child>
    <second-child>
      <third-child></third-child>
    </second-child>
  </first-child>
</component-parent>

Now I want to add some css stylings to <third-child></third-child>, but from the <component-parent></component-parent>s point of view.

How could I achieve this? I've tried something like this:

first-child > * > third-child {
  display: flex;
  flex-direction: row;
}

What am I doing wrong?

Answer 1

Are you adding the code to the component or master stylesheet? That type of CSS would likely need to be in the project master style sheet to work.

Note that > * > might not be working simply because your DOM is more complex once the app is rendered. Would need to see an inspection in browser to know for sure. Have you tried:

first-child third-child

Though Angular components are encapsulated by design, I believe that this kind of CSS may be considered going against the grain of the Angular design philosophy. A more "Angular way" might be to have a parameter on the third-child specifying a mode.

<component-parent>
  <first-child>
    <second-child>
      <third-child mode="nested"></third-child>
    </second-child>
  </first-child>
</component-parent>

And choose your style based on the variable.

A more CSS approach, might be to target the elements in the view instead of the tag names, for example in the view of third-child have:

<div class="third-child">
   ... component body here
</div>

(and repeat for other components) and target your CSS

.first-child .third-child {
  display: flex;
  flex-direction: row;
}

Another option is to change the ViewEncapsulation settings, maybe set it to none in all of the components

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

And gradually remove by trial and error until it works with the minimum number of components. I use this when I have a 3rd party component I can't change nested in one of my own, no known side effects in my project.

Answer 2

Use ::ng-deep inside component-parent.scss

:host ::ng-deep {
 // Styles you define here will work for all child component.
 // `:host` means these styles won't work outside of the `component-parent`
}

Answer 3

Add class name in third-class.component.html

<div class="third-component">
   .....
</div>

Add styles in component-parent.component.scss``

.third-component{
   display: flex;
   flex-direction: row;
}

import parent component style sheet in third-component.component.scss

 //inside third-component.component.scss
 // Add correct path. This is just a sample
 @import "./component-parent/component-parent.component.scss"