如何更改 ionic 4 中活动选项卡的颜色？答案

【问题标题】：How to change the color of active tab in ionic 4?如何更改 ionic 4 中活动选项卡的颜色？
【发布时间】：2019-06-03 18:09:33
【问题描述】：

我正在尝试更改 ionic 4 中选定选项卡的颜色，但我遇到了一些挑战。我正在使用标签模板。我尝试在 chrome://inspect 中对其进行编辑，它可以工作，但是当我为 android 构建时，它没有任何效果。

我需要改变什么？

【问题讨论】：

您需要更改.scss 文件，因为您在chrome://inspect 中进行了更改。并运行项目。
我试过了，但没有生效，我试过这个：.tab-btn-selected, .tab-btn:hover { color: red; }
你提到这个forum.ionicframework.com/t/…
@yushin 您能解释一下您最终是如何解决这个特定问题的吗？即使我在我们的 V4 应用程序中的许多其他地方使用了变量，我似乎也无法让它工作。提前致谢。
@jparg 我设法通过转到此beta.ionicframework.com/docs/theming/color-generator 来完成此操作，我生成了我希望我的主题类似于将 CSS 变量下的结果复制到名为 variables.scss 的主题文件夹下的文件中.

【解决方案1】：

只需使用 ion-tab-button CSS 自定义属性，--color-selected 所选标签按钮的颜色：

 ion-tab-button {
  --color-selected: red;
 }

【讨论】：

【解决方案2】：

我认为 Ionic 4 都是影子 DOM。我可能错了，但根据我一直在阅读的内容，您必须使用 CSS 变量来获取 Ionic 4 中的 shadow-dom 样式。例如：https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/

【讨论】：