css - 如何使用 Angular 2+ 指令从选项卡自定义背景颜色？

Question

我正在尝试为“md-tab-group”中的每个标签标签设置不同的背景，如下所示:

`<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-tab-label”是一个指令，但我知道我不能设置“id”或设置类来覆盖某些属性。

我检查了 Material Design 使用的类，发现了类“mat-tab-labels”。所以，我尝试在我的 scss 上这样做:

` .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;
  }`

它有效，但只是在我第一次进入页面时，id 才发生变化。

那么，有什么想法吗？我是否必须为此创建一个指令？

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;
  }
`