DevExtreme 字体颜色，根据变量值切换

Question

我想切换 DevExtreme 图表中字体的颜色。

文档中提供的配置示例是

<dxo-font color="black">

这是一个硬编码的值，我想把它变成一个变量，比如

<dxo-font color="{{lightMode?label-color-lite:label-color-dark}}" size="12" family="Roboto" weight="600">

因此根据 lightMode 的值，它应该从变量中获取颜色。

我将样式表 (.scss) 中的颜色定义为

$LabelColorLite: #02437c;
$LabelColorDark: #FFFFFF;

:host .label-color-dark {
    color:#FFFFFF;
}

:host .label-color-lite {
    color:#02437c;
}

如何将 dxo 字体与定义的 scss 链接

Answer 1

在全局 css 文件中定义您的颜色变量并如下所述使用它们

<dxo-font
      color="{{ lightMode ? $LabelColorLite : $LabelColorDark }}"
      size="12"
      family="Roboto"
      weight="600">

Answer 2

您不应该分配 class 属性而不是 color 吗？由于您使用的是 scss 类名

试试这个：

<dxo-font class="{{ lightMode ? 'label-color-lite' : 'label-color-dark' }}" size="12" family="Roboto" weight="600">