Угловой 7: Почему стиль класса не применяется к компоненту DOM?

Question

У меня есть компонентный биллинг, который включает ngb-tabset компонент Ng Bootstrap.

ngb-tabset имеет следующий элемент DOM:

<ngb-tabset _ngcontent-c3="" class="content">
  <!-- Tabset links-->
  <div class="tab-content">
    <div _ngcontent-c3="">
      <!-- Content -->
    </div>
  </div>
</ngb-tabset>

<div class="tab-content"> отображается динамически в соответствии с выбранной вкладкой.

В моем billing.component.scss следующий фрагмент не работает:

.tab-content {
  padding-right: 120px;
}

Код CSS правильно скомпилирован и, как правило, виден навигатором, но не влияет на элемент.

Но если я применю его к элементу вне компонента, код будет работать правильно.

Есть идеи об этом странном поведении?

Answer 1

Метод 1 - установка классов стилей в шаблоне содержимого вкладки

Просмотр инкапсуляции изолирует стили CSS каждого компонента, предотвращая влияние CSS родительского компонента на дочерние компоненты.Предпочтительным решением в данном случае было бы установить классы стилей в определении шаблона содержимого вкладки.Вот пример:

<ngb-tabset>
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="my-style-1">
        <p>Some content</p>
      </div>
    </ng-template>
  </ngb-tab>
  ...
</ngb-tabset>

.my-style-1 {
  padding-right: 120px;
  color: magenta;
  font-style: italic;
}

См. этот стек для демонстрации.

Метод 2 - Использование селектора псевдокласса :: ng-deep

Другой метод заключается в использовании ::ng-deep проникающего в тень комбинатора потомков для стиля содержимого NgbTabset дочерний компонент:

::ng-deep .tab-content {
  padding-right: 120px;
}

См. этот стек для демонстрации.

Метод 3 - Отключить инкапсуляцию представления

В качестве альтернативы, вы можете отключить инкапсуляцию представления родительского компонента:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

См. этот стековый блик длядемо.

Answer 2

Angular использует теневой DOM.Это означает, что она хранит логику DOM отдельно от других элементов.Компоненты имеют собственные стили.Они инкапсулированы таким образом, чтобы стили не влияли глобально.Итак, если вы хотите изменить стиль ngb-tabset, вы должны выйти за его рамки.Вот почему вам нужно использовать ViewEncapsulation.None.

В @Component decorator используйте ViewEncapsulation.None

@Component({
selector: ....,
encapsulation: ViewEncapsulation.None,
styles: [...])} 

И вы также можете использовать ng-deep.Но вы не должны использовать ng-deep, потому что это устарело.Смотрите здесь - https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep