angular：如何从本地组件访问应用程序根目录中的类名？

Question

I have three main pages and multiple child pages with each inherit its style from parent css.

country.routes.ts

 ...
 path: '',
 children: [
    { 
      path: '/country', 
      component: CountryComponent, 
      data: {
        cssClass: 'country',
      },
    },
    { 
      path: ':countryId/city', 
      component: CityComponent ,
      data: {
        cssClass: 'country-city',
      },
    },
    {
      path: ':countryId/fact', 
      component: FactComponent,
      data: {
        cssClass: 'country-fact',
      },
    },
...

CSS class is inserted to the a div just below the app-root like this

index.html (just rough html representation)

<app-root>
 <div clas="country/country-fact/country-city">
  <header></header>
  <div>
   <route-outlet>
    <main>
     <!-- content -->
    </main>
   </route-outlet>
  </div>
  <footer></footer>
 </div>
</app-root>

in the main.scss (global style)

country {
  background-color:red;
}
country-city {
  background-color:blue;
}
.country-fact {
  background-color: purple;
}

Because this is angular, therefore I want to exploit the view encapsulation and declare the style in the component declarator

country.component.ts

@component({

 ...
 styles: ['
  :host-context(.country) main{
    background-color:red;
 ','
   :host-context(.country) header{
     display:none;
    }
 '],

country-city.component.ts

@component({

 ...
 styles: ['
  :host-context(.country-city) main{
    background-color:blue;
 '],

country-fact.component.ts

@component({

 ...
 styles: ['
  :host-context(.country) main{
    background-color:purple;
 '],

From reading and tutorials:

The tutorial I read, so I change/edit parent's css by using the ':host' or ':host-context(.selector) .change-selector , but it doesn't say I can use the :host-context()` at the body or the app-root level.

I tried nested :host or `:host{ :host-context()}, both were failed.

In the https://blog.angular-university.io/angular-host-context/ , it says that it is possible to select at the body level with the puseudo class but it does not work. I read some other article which I can't find the link, it says the :host-context is similar to :host with a selector, then I can only select my parent's class and not at the body level.

Answer 1

The problem is that the main element is not part of the component you are applying the style to

From reading the official documentation for host-context ( https://angular.io/guide/component-styles#host-context ), you can only apply CSS styles to the elements INSIDE the component, based on some conditions outside of the component

The following example applies a background-color style to all elements inside the component, only if some ancestor element has the CSS class theme-light.

:host-context(.theme-light) h2 {
  background-color: #eef;
}

So to achieve what you are trying to do, you need to set these styles inside the component that has the main tag, or have the main tag inside your country components, or change the rules to target an element inside the country components (not the main tag)