从 ion-tab-bar ionic 4 中删除白色背景

Question

在我的 Ionic 4 项目中，我有选项卡式界面，其中有 4 个选项卡。

我尝试ion-tab通过添加一些自定义 css 来自ion-tab-bar定义圆角，如下所示。

我使用以下代码来实现此设计。

ion-tab-bar {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

ion-tab-button {
    transition: 0.2s ease-in;
}

.tab-selected {
    border-bottom: 4px white solid;
    // transition: 0.2s ease-in;
    font-size: 0;
    ion-icon {
        transform: scale(1.3);
        transition: 0.2s ease-in;
    }
}

我在这里面临的问题是，顶部有一个白色背景，重叠在我在所选选项卡页面上显示的卡片上。

我不知道为什么卡片上会出现白色背景。我希望它是透明的。我尝试通过scss选项卡组件文件更改背景颜色，但这对我不起作用。我怎样才能删除ion-tab-bar.

Answer 1

查看开发工具中的 DOM，ion-tabs 组件基本上如下所示：

<ion-tabs>
   <div class="tabs-inner"></div>
   <ion-tab-bar class="md hydrated" slot="bottom"></ion-tab-bar>
</ion-tabs> 

查看 Ionic源代码中的 tabs-inner 类，您会看到以下内容：

.tabs-inner {
    position: relative;

    flex: 1;

    contain: layout size style;
}

如果您将 div 的 css 位置从相对位置更新为未设置，您可以实现您想要做的事情。我不是 CSS 专家，因此可能有一种更简洁的方法来覆盖这种样式。也就是说，这是一种解决方案。

在您的 global.scss 文件中，您可以通过添加以下内容来覆盖该类：

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

请记住，此样式将应用于您应用程序中的所有选项卡页面。

我创建了一个存储库供参考。

希望这可以帮助。