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

【问题标题】：DevExtreme font color, toggle based on variable valueDevExtreme 字体颜色，根据变量值切换
【发布时间】：2021-04-23 02:52:18
【问题描述】：

我想切换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-font 与定义的 scss 链接

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

试试这个：

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

【讨论】：