CODEWITHSUNDEEP
cssangular
Andreas Teich
Andreas Teich

Reputation: 359

Angular css style child from parent

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?

Upvotes: 0

Views: 576

Answers (3)

Vaishnavi
Vaishnavi

Reputation: 1

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"

Upvotes: 0

wangdev87
wangdev87

Reputation: 8751

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`
}

Upvotes: 1

CodeMonkey
CodeMonkey

Reputation: 3331

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.

Upvotes: 1

Related Questions