Ionic 4 Tabs styling

问题

I am trying to give the tabs in a ionic 4 app a gradient background. I am also trying to set a different color (Gradient) background for each page. Controlling the style for the tabs in the scss for each page.

The desired affect is as below.

回答1:

For <shadow-root> which indicates that the browser you're using supports Shadow DOM technique so you can access its elements by only their variables,So try the following

ion-toolbar {
  --ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

ion-tab-bar {
  --ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

If it doesn't work just please detect father -i call it- or its wrapper and put it in advance of it,In another word

wrapper ion-tab-bar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}

wrapper refers to the element that wrapping ion-tab-bar

回答2:

You can set a CSS gradient to the toolbar (top) and tabbar (bottom):

ion-toolbar{
  --background: linear-gradient(to right, #color1 0%, #color2 100%);
}

ion-tab-bar{
  --background: linear-gradient(to right, #color1 0%, #color2 100%);
}

In case you want to set the gradient for the whole app, place the CSS inside theme > variable.scss

Docs

https://ionicframework.com/docs/api/toolbar
https://ionicframework.com/docs/api/tab-bar

来源：https://stackoverflow.com/questions/54800871/ionic-4-tabs-styling