Angular Material Tab активная ссылка, чтобы поставить стрелку раскрывающегося списка

Question

Я новичок в Angular, и я пытаюсь сделать какую-нибудь активную линейную панель Angular для замены стрелки, но она не работает, кто-нибудь знает, как это сделать правильно

образец stackblitz здесь

код

<mat-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>

css

/* active tab */
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
  color:#0f2241;
  background-color: lightgrey;
}

/* ink bar */
::ng-deep .mat-ink-bar {
  background-color:red !important; background:  url('../../../assets/sg-img/drop-down-arrow.png');
}

Спасибо

Answer 1

Вместо использования ::ng-deep установите для ViewEncapsulation вашего компонента значение none:

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

@Component({
  selector: 'tab-group-stretched-example',
  templateUrl: 'tab-group-stretched-example.html',
  styleUrls: ['tab-group-stretched-example.css'],
  encapsulation: ViewEncapsulation.None
})
export class TabGroupStretchedExample {}

Затем используйте следующий CSS-код (мне пришлось использовать другую стрелку, поскольку вы использовали локальную ссылку в вашем стеке бликов):

.example-stretched-tabs {
  max-width: 800px;
}
/* active tab */
.mat-tab-list .mat-tab-labels .mat-tab-label-active {
  color:#0f2241;
  background-color: lightblue;
  opacity: 1;
}

/* ink bar */
.mat-tab-group.mat-primary .mat-ink-bar {
  background: none;
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 10px;
}

Это то, что вы искали: stackblitz ?