我正在進行一個ionic 7項目，這里我有一個帶有4個標簽的導航指南

我現在想設計iontabs的樣式，并添加了自定義css。

我得到了一個黑色的背景，盡管這個區域應該是透明的。

我有一個類似的問題，我把它作為參考，但是解決方案在這里沒有幫助我(從離子-標簽-欄離子4中刪除白色背景)。

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

不幸的是，我還在global.scss中添加了以下內容，但沒有成功

.tabs-inner {
  position: unset !important;
}

你有黑色的背景，這就是為什么.....

ion-tab-bar{
  background-color: black;
}

它需要是透明的。

ion-tab-bar{
  background-color: rgba(0,0,0,0.5);
}