子コンポーネントが親からスタイルを取らないようにする

Question

私は親から完全に独立してスタイルを設定したい別のコンポーネントの中にコンポーネントを持っています。現在の例はテキストの配置です。私は親の中にtext-align:centerを設定しましたが、私はそれが子供に流れ落ちることは望ましくありません。私は3種類のViewEncapsulation（ネイティブ、なし、エミュレート）を試みましたが、すべての場合、スタイルは子にフィードされ、テキストは中央で整列されます。どのようにこれに対処するための任意のアイデア？

親コンポーネント：

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

親スタイル：

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

子コンポーネント：

<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> 

'購入' と '賃貸' のテキストは、それがあるにも関わらず、中央揃えです別個の構成要素内で

Answer 1

これは、あなたの "Buy"と "Rent"テキストが.Home__Bannerクラスのdiv内にあるからです。たとえそのクラスがCSSの親クラスであっても、Home_Bannerに含まれるすべてのものにそのテキストが揃っている必要があります。これを避けるには、 "MhSearchForm__NavLink"にスタイルを設定して、テキストの配置を左に設定する必要があります。