In my current project using Ionic 7, I have a navigation guide set up with 4 tabs. I am trying to customize the styling of these ion tabs by adding some custom CSS.
The issue I'm facing is that despite my attempts to make the background transparent, it shows up as black instead.
I referred to a previous question on Stack Overflow about removing the white background from ion-tab-bar in Ionic 4, but unfortunately, the solution suggested there did not work for me.
HTML:
<ion-tabs>
<div class="tabs-inner"></div>
<div style="background-color: whitesmoke; border-radius: 20px 20px 0 0 ;">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="race">
<ion-icon name="map-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="favoriten">
<ion-icon name="bookmarks-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="start">
<ion-icon name="home-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="me">
<ion-icon name="person-outline"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</div>
</ion-tabs>
CSS:
ion-tab-bar{
//position: absolute;
--background: rgba(255,255,255,5);
border-radius: 25px 25px 25px 25px;
margin-left: 15px;
margin-right :15px;
margin-bottom: 15px;
margin-top: 15px;
background-color: black;
box-shadow:
0px 3px 6px 0px rgba(0,0,0,0.04),
0px 1px 3px 0px rgba(0,0,0,0.02);
flex: 1;
position: unset !important;
}
.tabs-inner {
position: relative;
//flex: 1;
contain: layout size style;
}
I also tried adding the following snippet to global.scss, but it didn't solve the issue:
.tabs-inner {
position: unset !important;
}