Angular 7: почему стиль класса не применяется к компоненту DOM?
У меня есть биллинг компонента, который включает компонент нгб-табсет 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 правильно скомпилирован и, как правило, виден навигатору, но не влияет на элемент.
Но если я применяю его к элементу вне компонента, код работает правильно.
Любая идея об этом странном поведении?
Ответы 2
Способ 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
})
См. этот стекблиц для демонстрации.
Angular использует теневой DOM. Это означает, что логика DOM отделена от других элементов. Компоненты имеют собственные стили области видимости. Они инкапсулированы таким образом, что стили не должны действовать глобально. Итак, если вы хотите изменить стиль ngb-tabset, вы должны выйти за его рамки. Вот почему вам нужно использовать ViewEncapsulation.None.
В декораторе @Component используйте ViewEncapsulation.None
@Component({
selector: ....,
encapsulation: ViewEncapsulation.None,
styles: [...])}
И вы также можете использовать ng-deep. Но вы не должны использовать ng-deep, потому что он будет объявлен устаревшим. См. здесь- https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep