设置选定的 ion-tab-button 边框底部颜色

Question

我正在尝试为 ionic-4 中选定的选项卡按钮设置边框底部。但似乎边框 属性 在这种情况下不起作用。

我尝试使用如下所示的框阴影 属性，但它只对整个框的 border-top 或 border 有帮助。我正在寻找一个选项来为我选择的选项卡设置边框底部颜色。我已经尝试了以下两种方法，但没有用。

ion-tab-button[aria-selected=true] {
   box-shadow: 0 0 2px 2px blue inset;
}

ion-tab-button[aria-selected=true] {
   border-bottom: #212a49 2px;
}

Answer 1

两件事可能有帮助：

你把它放在哪里

因为 Ionic 4 使用 Web 组件，所以文件是分开的。因此，除非您将规则放入与之关联的 scss 文件中，否则该规则可能不会被应用。即使那样也无法修改某些样式。

使用shorthand方法

某处有一个 github 问题解释说，他们没有添加大量属性，而是选择公开 shorthand 属性 让您设置所有属性。

如果要使用边框，您需要使用 border 的 shorthand 版本，并设置所有 4 个边，而不是直接使用 border-bottom。

Answer 2

我没有像 border:0 0 2px 0 那样设置它，而是使用 border-bottom: solid #212a49 并且它起作用了。直接添加颜色而不提及实线、虚线或点线是行不通的。所以这就是我实现我想要的视图的方式。