在组件颜色属性中使用颜色变化不起作用

Question

在Ionic v4应用程序中，我有一个标签组件，我想在其中应用secondary-shade颜色，但是如果我想直接从color属性中应用它，它将不起作用。 / p>

这就是我应用颜色的方式：

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

虽然可以通过CSS应用颜色：

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

Answer 1

要直接使用color属性提供次要阴影颜色，您需要在 variables.scss内定义次要阴影颜色 < / strong>。

转到 src / theme / variables.scss ，然后将您的次要阴影颜色添加到 $colors ，如下所示。< / p>

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

现在，您可以根据需要使用它。

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