Использование изменения цвета в атрибуте цвета компонента не работает

Question

В приложении Ionic v4 у меня есть компонент метки, к которому я хочу применить цвет secondary-shade, но он не работает, если я хочу применить его непосредственно из атрибута color.

Вот как я применяю цвет:

<ion-label color="secondary-shade">Secondary shade Label</ion-label>

Применение цвета из CSS работает, хотя:

ion-label {
  --color: var(--ion-color-secondary-shade);
}

Answer 1

Чтобы задать цвет вторичного оттенка , напрямую используя атрибут color, необходимо определить цвет вторичного оттенка внутри variables.scss.

Перейдите на src / theme / variables.scss и добавьте свой вторичный оттенок к $colors, как показано ниже.

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  secondary-shade: #f53dc7
);

Теперь вы можете использовать его по своему усмотрению.

<ion-label color="secondary-shade">Secondary shade Label</ion-label>