Apply parent component css to child not in sibling component in Angular 11 - TagMerge
3Apply parent component css to child not in sibling component in Angular 11Apply parent component css to child not in sibling component in Angular 11

Apply parent component css to child not in sibling component in Angular 11

Asked 12 months ago
0
3 answers

You can use Emulated encapsulation

encapsulation: ViewEncapsulation.Emulated,

Similar to ViewEncapsulation.None, Angular adds the styles for this component to the head of the document, but with "scoped" styles.

Therefore, only the elements directly within this component's template will match its styles. Since the "scoped" styles from the EmulatedEncapsulationComponent are very specific, they override the global styles from the NoEncapsulationComponent.

Source: link

0

I've got a parent component:
<parent></parent>
And I want to populate this group with child components:
<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>
Parent template:
<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>
Child template:
<div class="child">Test</div>
In my parent component I tried doing:
.parent .child {
  // Styles for child
}

Source: link

0

parent.template.html
<div class="parent__container">
  <app-child></app-child>
</div>
parent.component.css
.parent__container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: peru;
  width: 300px;
  height: 300px;
}
child.template.html
<div class="child__container"></div>
child.component.css
.child__container {
  background-color: green;
  width: 150px;
  height: 150px;
}
parent.component.css
.parent__container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: peru;
  width: 300px;
  height: 300px;
}

.parent__container.alert .child__container {
  background-color: darkred;
}

Source: link

Recent Questions on css

    Programming Languages