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>

＆＃39;购买＆＃39;和＆＃39;租＆＃39;文本是中心对齐的，尽管它位于一个单独的组件中

Answer 1

那是因为你的＆＃34;购买＆＃34;和＆＃34;租＆＃34;使用.Home__Banner类在div内部进行文本处理，即使该类是CSS中的父类，也要告诉类Home_Banner中包含的所有内容应该是文本对齐。为了避免这种情况，你必须为你的＆＃34; MhSearchForm__NavLink＆＃34;设置一种风格。将文本对齐设置为左侧。

阻止子组件从父

1 个答案: