Angular css style child from parent

63
November 29, 2020, at 06:30 AM

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"
READ ALSO
Pythagoras Tree angle

Pythagoras Tree angle

I am writing a Pythagoras Tree on Java program, and I think I am on a good trackHowever, I don't really know how to use the angle

50
Convert object to array in php from wordpress database field

Convert object to array in php from wordpress database field

sorry for this stupid question but i'm trying to beautify a value from a wordpress database fieldI'm trying to get the values as an array or json from the string:

43
Join and plot data with different times in 10 minute interval

Join and plot data with different times in 10 minute interval

I have 3 tables in an Access database with the same column names (TempDate and Temp), but different time stampsThe data was collected in 10 minute intervals, but each of the recording devices had different start times

83