Verhindern, dass Kind-Komponente Stil von Parent übernimmt

Question

Ich habe eine Komponente in einer anderen, die ich völlig unabhängig von der übergeordneten stylen möchte. Aktuelles Beispiel ist die Textausrichtung; Ich habe im Elternteil eingestellt, aber ich möchte nicht, dass das zum Kind herunterrieselt. Ich habe die drei verschiedenen Arten von ViewEncapsulation (Native, None und Emulated) ausprobiert, aber in allen Fällen wird der Stil an das Kind weitergegeben und der Text wird zentral ausgerichtet. Irgendwelche Ideen, wie man damit umgeht?

Geordnete Komponente:

<div class="Home__Banner"> 
    <div class="container"> 
    <div class="mt-5 mb-5"> 
    <app-mh-search-form></app-mh-search-form> 
    </div> 
</div> 

Eltern Stil:

.Home { 
    &__Banner { 
    background: url('/assets/images/homepage/mainImg.jpg') no-repeat center 
     center fixed; 
    background-size: cover; 
    text-align: center; 
    } 
} 

Kinder Komponente:

<div class="MhSearchForm"> 
    <div class="container"> 
    <div class="row"> 
     <div class="MhSearchForm__Nav"> 
     <div class="MhSearchForm__NavLink" (click)="setActiveState('buy')"> 
      BUY 
     </div> 
     <div class="MhSearchForm__NavLink" (click)="setActiveState('rent')"> 
      RENT 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

The 'Buy' und 'Rent' text Zentrum ausgerichtet ist, obwohl es sich als in einer separaten Komponente

Answer 1

Das liegt daran, dass sich Ihr "Buy" - und "Rent" -Text innerhalb des div mit der .Home__Banner-Klasse befinden, selbst wenn diese Klasse für Eltern in CSS ist, sagen Sie alles, was in der Klasse Home_Banner enthalten ist. Um dies zu vermeiden, müssen Sie einen Stil für "MhSearchForm__NavLink" festlegen, um den Text auf der linken Seite auszurichten.