Как заставить Angular не экранировать вложенные правила?

Question

У меня есть простое требование для стиля заголовка раздела mat-tab-group. Следующее правило применяется более чем штраф

   mat-tab-group.buttons-tab { 
      > .mat-tab-header {
        ... some more rules 
      }
  }

Однако, это должно быть сделано в глобальном CSS, в то время как я хотел бы включить его в используемый компонент (так как это единственное место, где будет использоваться этот пользовательский стиль). Angular инкапсулирует класс buttons-tab, но также инкапсулирует .mat-tab-header. Эта инкапсуляция предотвращает применение правила, поскольку внутренние mat-tab-headers не экскалируются. Отключение инкапсуляции для моего компонента не вариант , так как в нем содержится больше стилей, требующих инкапсуляции.

Так что вопросы

1. Возможно ли отключить инкапсуляцию для вложенных правил?
2. Возможно, можно добавить несколько файлов стилей в @Component и установить инкапсуляцию для каждого файла отдельно.
3. Является ли использование глобальных стилей (или отключение инкапсуляции) единственным рабочим решением?

Answer 1

В компонент, который вы хотите предотвратить инкапсуляцию представления, вы можете поместить код (Внутри блока @Component):

   encapsulation: ViewEncapsulation.None

Подробнее об этом читайте здесь: https://angular.io/guide/component-styles#view-encapsulation