设置选定的离子标签按钮边框底色

Question

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

我尝试使用box-shadow属性，如下所示，但它仅对整个框的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文件中，否则可能不会应用该规则。即使那样，某些样式也无法修改。

使用速记方法

某个地方有一个github问题，它解释说，他们没有添加大量属性，而是选择公开速记属性，以便您设置所有属性。

如果边框可以使用，则需要使用border的简写版本，并设置所有4面，而不是直接使用border-bottom。

Answer 2

我没有使用border：0 0 2px 0这样的设置，而是使用border-bottom：solid＃212a49，它可以正常工作。直接添加颜色而不提及实线，虚线或点线是行不通的。所以这就是我达到期望的观点的方式。