Как добавить пользовательский css к компоненту библиотеки в angular?

Question

Я использую Angular 9.0 с дизайном материала.

В компоненте я хотел бы использовать <mat-tab-group> и стилизовать массив, чтобы иметь определенный цвет и дизайн.

Я знаю 2 способа:

1. с использованием ::ng-deep, но теперь устарел
2. с использованием глобальной таблицы стилей css, но применять его везде

Я хочу сделать это ТОЛЬКО на вкладке, содержащейся в этом компоненте.

  <mat-tab label="myList">
    <div>
      <app-lister-search></app-lister-search> 
    </div>
    <div>
      <app-lister></app-lister> 
    </div>
  </mat-tab>
</mat-tab-group>```

this will generate some component, and I want to apply css to some of them, but they is not possible to add this in the component css as it it outside of the scope.

How can I achieve this ? 

Answer 1

Ничто не мешает помещать ваши стили в "основную" таблицу стилей и применять их только к группам вкладок с указанными c классом:

Шаблон:

<mat-tab-group class="my-tab-group">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

стилей .s css:

.my-tab-group {
  background-color: orange;

  .mat-tab-label {
    padding: 5em;

    &-active {
      background-color: green;
    }
  }
}

Пример Stackblitz