Help with the DOM Shadowing

Ionic Framework
1

Hello to everyone and first of all, thanks in advantage, i’ve just upgraded to ionic-4 for a new brand app

The major problem i’m facing right now is the shadowing (i think)

I’m trying to apply a custom style (background colors) to the bottom toolbar (it’s a tab app) but it cannot be done as usual (in global.css) the browser is not even recognizing the css styles.

My Global.scss


.sc-ion-tabbar-md-h
{
    background: #183f8e !important;
    --background: #183f8e !important;
}

The html code i want to theme

<ion-tabs class="customTabs">
  <ion-tab label="Mis pedidos" icon="list" href="/tabs/(my-orders:my-orders)">
    <ion-router-outlet name="my-orders"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Nuevo" icon="flag" href="/tabs/(new-order:new-order)">
    <ion-router-outlet name="new-order"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Tienda" icon="md-appstore" href="/tabs/(store:store)">
    <ion-router-outlet name="store"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Ajustes" icon="cog" href="/tabs/(settings:settings)">
    <ion-router-outlet name="settings"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

In global.scss using this css i’ve been able to change the ion-header background but i cannot reproduce it for the tabs

.header-md::after
{
    background-image: none !important;
}
.header-md
{
    ion-toolbar
    {
        background: #183f8e !important;
        --background: #183f8e !important;

        ion-title
        {
            text-align: center;
            img
            {
                width: 72px;
            }
        }
    }
}

35
Captura de pantalla 2018-10-31 a las 12.39.35.png471×767 9.15 KB

Any help will be appreciated