防止子组件从父组件中获取样式

Question

我在另一个内部有一个组件，我想完全独立于父组件来设置它的样式。当前示例是文本对齐；我在父母中设置了text-align:center，但我不希望它渗透到孩子身上。我尝试了三种不同类型的 ViewEncapsulation（Native、None 和 Emulated），但在所有情况下，样式都被馈送到子级并且文本居中对齐。任何想法如何处理这个？

父组件：

<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

那是因为您的“购买”和“出租”文本在带有 .Home__Banner 类的 div 内，即使该类是 CSS 中的父类，您也告诉 Home_Banner 类中包含的所有内容都应使其文本对齐。为避免这种情况，您必须为“MhSearchForm__NavLink”设置样式以将文本设置为左对齐。