CODEWITHSUNDEEP
angular
abyrne85
abyrne85

Reputation: 1460

Prevent Child component from taking style from Parent

I have a component inside another which I'd like to style completely independently from the parent. Current example being the text alignment; I've set text-align:center in the parent but I don't want that to trickle down to the child. I've tried the three different types of ViewEncapsulation (Native, None and Emulated) but in all cases the style is fed down to the child and the text is centrally aligned. Any ideas how to deal with this?

Parent Component: 

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

Parent Style : 

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

Child Component: 

<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' and 'Rent' text is center aligned, despite it being in a separate component

Upvotes: 0

Views: 809

Answers (1)

Jordy Garc&#237;a
Jordy Garc&#237;a

Reputation: 141

That is because your "Buy" and "Rent" text are inside the div with the .Home__Banner class, even if that class is for parent in CSS you are telling everything contained in the class Home_Banner should have its text align. To avoid this you have to set a style to your "MhSearchForm__NavLink" to set the text align to the left.

Upvotes: 1

Related Questions