각도 2 이상의 지시문을 사용하여 탭에서 배경색을 사용자 정의하는 방법은 무엇입니까?

Question

나는 다음과 같이 'MD-탭 그룹'안에있는 내 탭 라벨 각각에 대해 서로 다른 배경을 설정하기 위해 노력하고있어 :

`<md-tab-group class="full-width"> 
     <md-tab> 
     <ng-template md-tab-label> 
      <md-icon class="em-tab-icons">directions_boat</md-icon> 
     </ng-template> 
     <p>Slings</p> 
    </md-tab> 

    <md-tab> 
     <ng-template md-tab-label> 
      <md-icon class="em-tab-icons">local_gas_station</md-icon> 
     </ng-template> 

     <p>Fuels</p> 
    </md-tab> 

    <md-tab> 
     <ng-template md-tab-label> 
      <md-icon class="em-tab-icons">restaurant_menu</md-icon> 
     </ng-template> 
     <p>Consumables</p> 
    </md-tab> 
</md-tab-group>` 

은 'MD-탭 레이블'는 내가 아는 한 것을을 지시문은 "id"를 설정하거나 클래스를 설정하여 일부 속성을 재정의 할 수 없다는 것을 알고 있습니다.

나는 Material Design에서 사용한 클래스를 검사했으며 'mat-tab-labels'클래스를 발견했습니다. 그래서, 난 내 SCS들에이 작업을 수행하려고 :

` .mat-tab-labels:first-child { 
    background-color: #E1E8F5; 
    } 
    .mat-tab-labels:nth-child(2) { 
    background-color: #FFD9B9; 
    } 
    .mat-tab-labels:nth-child(3) { 
    background-color: #E6D2C8; 
    }` 

했지만 작동하지 않았다. 물론 그 전은 다음과 같이 사용하는 경우 :

` #md-tab-label-0-0{ 
    background-color: #E1E8F5 !important; 
    } 
    #md-tab-label-0-1{ 
    background-color: #FFD9B9 !important; 
    } 
    #md-tab-label-0-2{ 
    background-color: #E6D2C8 !important; 
    }` 

를하고 작동하지만 처음에만 내가 IDS 변화보다 페이지를 입력합니다.

그래서 어떤 아이디어입니까? 이 지시어 만 작성해야합니까?

Answer 1

.scss가 부모 컨테이너 div .mat-tab-labels을 타겟팅하고 있습니다.이 노드에는 아마 여러 개의 노드가 없습니다. 내가 목표로 삼아야한다고 생각하는 것은 그 부모 컨테이너 안에 각각 .mat-tab-label 노드입니다. 당신은 다음 다음이 당신의 .scss 파일을 업데이트하는 경우

조건부 색상이 작동합니다 :

` 
    .mat-tab-label:nth-child(1) { 
    background-color: #E1E8F5; 
    } 
    .mat-tab-label:nth-child(2) { 
    background-color: #FFD9B9; 
    } 
    .mat-tab-label:nth-child(3) { 
    background-color: #E6D2C8; 
    } 
`