CSS Ionic 4 中的变量

Question

我正在尝试更改所选选项卡中图标的颜色，但我真的很纠结于如何覆盖变量。

我正在执行以下操作：

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

Answer 1

我想通了！看起来 --ion-color-contrast 源于您应用到组件的原始它们，在我的例子中是 "dark"。所以我实际上需要覆盖 --ion-color-dark-contrast 如下：

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

Answer 2

要为特定组件设置 CSS 变量，请将变量添加到其选择器中。有关 Ionic 提供的 component-level 变量的更多信息，请参阅 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;
  }

CSS Ionic 4 中的变量

CSS Variables in Ionic 4

css-variables

ionic-framework

ionic4