如何在Quasar中的q-stepper组件中自定义done-color、active-color和inactive-color？

Question

我正在使用

q-stepper

中的

Quasar

组件，并希望为步骤的每个状态自定义颜色：

done-color

、

active-color

和

inactive-color

。

我不仅在

q-stepper

中遇到了这个问题，而且在

Quasar

中的其他几个组件中也遇到了这个问题，我无法应用自定义颜色。

这是我当前的代码：

<q-stepper
ref="stepperRef"
v-model="step"
animated
done-color="var(--theme-sea-green-400)"
active-color="var(--theme-primary)"
inactive-color="warning-400"
class="q-ma-xs q-pa-sm"
style="background-color: var(--theme-2)">

<q-step
    :name="1"
    :title="$t('asset_managment.meter_list.meter_transfer_dialog.select_source_modem')"
    icon="router"
    class="flex"
    :done="step > 1"/>
</q-stepper>

我尝试使用一些 CSS 类和 CSS 变量，但没有达到我需要的结果。我希望每个状态（

done

、

active

和

inactive

）都有自定义颜色。如代码所示，我的主要目标是将

done-color

、

active-color

和

inactive-color

与自定义 SCSS 颜色。

如何为

q-stepper

中的每个步骤状态应用自定义颜色？

Answer 1

我找到了一个您也可以使用的解决方案。

如果像我一样，您需要使用项目中的变量为浅色和深色主题应用不同的颜色，您可以在主题文件中进行如下设置：

--theme-sea-green-900: #00525b;

.text-seaGreen-400 {
  color: var(--theme-sea-green-400);
}

.bg-seaGreen-400 {
  background-color: var(--theme-sea-green-400);
}

这样，使用

bg

作为背景颜色，使用

text

作为颜色将按预期工作。

注意：当您应用这些类时，只需使用基本名称，例如

seaGreen-400

，无需包含

text

或

bg

。

我设置

.bg-seaGreen-400

和

.text-seaGreen-400

与

var()

的原因是这样我可以为浅色和深色主题分配不同的颜色。