Невозможно изменить высоту вкладки, цвет в Angular 6

Question

Я новый Angular, CSS и Html. Я использовал MatTabsModule (import {MatTabsModule} из '@ angular / material / tabs';) для создания вкладок, но я могу регулировать / изменять высоту, фон и т. Д. Короче говоря, я не могу переопределить стандартные свойства MatTabsModule. классы. Пожалуйста, помогите мне. Ниже мой CSS и HTML-код. Надеюсь, код Typescript не нужен.

HTML: -

<mat-card>
 <mat-card-content>
  <mat-tab-group class="tab-group" dynamicHeight>
      <mat-tab *ngFor="let obj of tags">
          <ng-template mat-tab-label>{{ obj.name }}</ng-template>
          <div class="tab-content">
              {{ obj.name }}
          </div>
      </mat-tab>
  </mat-tab-group>
</mat-card-content>

CSS: -

.tab-group {
  border: 1px solid #e8e8e8;
  margin-bottom: 30px;

  .unicorn-dark-theme & {
    border-color: #464646;
  }
}

.tab-content {
  padding: 16px;
}

mat-card{
  padding: 0px;
}

.mat-tab-label .mat-ripple {
  min-width: 0;
  height: 30px;
}

Я не могу изменить цвет фона высоты ширины этих вкладок ..: (

Answer 1

Вы не можете получить доступ к стилям дочерних компонентов из вашего css-файла, так как ViewEncapsulation.Emulated предотвращает утечку стилей в остальную часть приложения (как и должно быть, не меняйте ее).

Если вы используете селектор ng-deep-select следующим образом: :host ::ng-deep mat-tab { ... } вы можете переопределить стили материалов по умолчанию, которые не могут быть настроены каким-либо другим способом. Я говорю это потому, что утечка CSS из компонента считается плохой практикой, и если возможно, вы должны использовать @Input для передачи стилей.

Кстати, есть: host, поэтому стили просачиваются только к дочерним компонентам этого компонента, а не к остальной части приложения