Add CSS/SCSS property to main component for child component's element (h1) while using router-outlet in Angular

Question

I have a major component 'Dashboard with following Code'

  ...
  <div class="col-8 container-right">
    <router-outlet></router-outlet>
  </div>
</div>

And with the following SCSS:

.container-right{
    padding:2.5rem 0rem;

}

router-outlet h1 {
    margin-bottom: 1rem;
  }

the router-outlet h1 Not working.

I have another component 'Trips' with following HTML:

<div>
  <h1 *ngIf="currentLoc == 'myPlanners'; else friendPlannerHead">My Trips</h1>
...

Other components are also in similar fashion. Now I want to add margin-botton:1rem to h1 tag from the Dashboard Component . Can anyone share the possible solutions?

Answer 1

To dashboard.component.css add style. It's encapuslated so only dashboard.component will be affected.

h1 {
  margin-bottom: 1rem;
}

You can not style router-outlet , but the router outlet will render <app-dashboard></app-dashboard> which's <h1> could be targeted. In styles.css global stylesheet add:

app-dashboard > h1 {
  margin-bottom: 1rem;
}