Переменные CSS в Ionic 4

Question

Я пытаюсь изменить цвет значка на выбранной вкладке и действительно пытаюсь перезаписать переменную.

Я делаю следующее:

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

Answer 1

Чтобы установить переменную CSS для конкретного компонента, добавьте переменную внутри его селектора. См. Ionic Variables для получения дополнительной информации о переменных уровня компонента, которые предоставляет 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;
  }

Answer 2

Я понял это!Похоже, что --ion-color-контраст проистекает из оригинальных, которые вы применили к компоненту, в моем случае «темный».Поэтому мне действительно нужно переписать --ion-color-dark-контраст следующим образом:

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