在Ionic 3中為標簽設置不同的顏色

Question

我正在使用Ionic 3開發應用程序。

我的應用程序底部有標簽。

問題是，我希望每個選項卡都具有不同的顏色，但是我無法通過SCSS表實現它。 我只能更改整個欄的顏色，而不能通過覆蓋SCSS變量來選擇每個選項卡。

有人知道怎么做嗎？

這是我的HTML。

<ion-tabs selectedIndex="0" >

<ion-tab className="fontSizeText" [root]="homeRoot" tabTitle="Scanner un code" tabIcon="camera"></ion-tab>
<ion-tab [root]="productRoot" tabTitle="Produits" tabIcon="basket"></ion-tab>
<ion-tab className="fontSizeText" [root]="informationRoot" tabTitle="Sensibilisation" tabIcon="leaf"></ion-tab>
<ion-tab [root]="accountRoot" tabTitle="Mon Compte" tabIcon="build"></ion-tab>

</ion-tabs>

真誠的謝謝

Answer 1

您可以嘗試為ion-tabs元素賦予任何標識符，例如類或ID。 然后，您可以像這樣通過CSS訪問標簽：

ion-tabs.yourClass {
    .tabbar {
        a.tab-button {
            &:nth-child(1) {
                background-color: black;
            }
            &:nth-child(2) {
                background-color: black;
            }
            ...
        }
    }
}

這不是最漂亮的解決方案，但這是我知道的訪問單個Tab元素的唯一方法。

問題是，當您將任何class放到ion-tab元素上時，它將被添加到ion-tab而不是鏈接到它。 Ionic在頂部或底部動態創建此工具欄。