Ionic 4 中的 CSS 变量

【问题标题】：CSS Variables in Ionic 4Ionic 4 中的 CSS 变量
【发布时间】：2019-02-17 19:02:18
【问题描述】：

我正在尝试更改所选选项卡中图标的颜色，并且正在为如何覆盖变量而苦苦挣扎。

我正在做以下事情：

 ion-tabs {
    --color-selected: #ff7800 !important;
    --ion-color-contrast: #ff7800 !important;
}

【问题讨论】：

你能在 plunker 中分享你的代码吗？

标签： ionic-framework css-variables ionic4

【解决方案1】：

我想通了！看起来 --ion-color-contrast 源于您应用于组件的原始它们，在我的情况下是“黑暗”。所以我实际上需要覆盖 --ion-color-dark-contrast 如下：

 ion-tabs {
    --ion-color-dark-contrast: #ff7800 !important;
}

【讨论】：

【解决方案2】：

要为特定组件设置 CSS 变量，请在其选择器内添加变量。有关 Ionic 提供的组件级变量的更多信息，请参阅 Ionic 变量。

/* Set the color on all ion-button elements */
  ion-button {
   --color: #222;
   }

  /* Set the background on an ion-button with the .fancy-button class */
  .fancy-button {
   --background: #00ff00;
  }

【讨论】：