如何在Quasar的q-stepper组件中自定义done-color等状态颜色？

方案一：全局定义SCSS变量并直接在组件属性中使用 #

Quasar组件的颜色属性（如done-color、active-color）支持直接传入CSS颜色值，包括自定义CSS变量。要让SCSS变量能在模板中使用，需要先将其转换为全局CSS变量：

1. 在Quasar的全局SCSS变量文件（默认路径src/css/quasar.variables.scss）中定义你的自定义颜色，并转成CSS变量：

// src/css/quasar.variables.scss
// 定义SCSS颜色变量
$theme-sea-green-400: #2ecc71;
$theme-primary: #3498db;
$theme-inactive: #bdc3c7;
$theme-2: #f5f5f5;

// 转换为全局CSS变量，供模板使用
:root {
  --theme-sea-green-400: #{$theme-sea-green-400};
  --theme-primary: #{$theme-primary};
  --theme-inactive: #{$theme-inactive};
  --theme-2: #{$theme-2};
}

2. 在组件中直接引用这些CSS变量：

<q-stepper
  ref="stepperRef"
  v-model="step"
  animated
  done-color="var(--theme-sea-green-400)"
  active-color="var(--theme-primary)"
  inactive-color="var(--theme-inactive)"
  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>

注：确保你的Quasar项目已正确配置SCSS支持（默认新建项目已开启），全局变量会自动注入到所有组件中。

方案二：深度选择器覆盖组件样式（属性不生效时用） #

部分Quasar组件的内部元素样式优先级较高，直接用组件属性可能无法生效，此时可以通过深度选择器结合SCSS变量强制覆盖：

在组件的<style scoped>标签中添加如下样式（根据Vue版本选择::v-deep或/deep/）：

<style lang="scss" scoped>
// 已完成步骤的文字、边框颜色
::v-deep .q-stepper__step--done {
  color: $theme-sea-green-400;
  border-color: $theme-sea-green-400;
}
// 已完成步骤的图标颜色
::v-deep .q-stepper__step--done .q-icon {
  color: $theme-sea-green-400;
}

// 激活步骤的文字、边框颜色
::v-deep .q-stepper__step--active {
  color: $theme-primary;
  border-color: $theme-primary;
}
// 激活步骤的图标颜色
::v-deep .q-stepper__step--active .q-icon {
  color: $theme-primary;
}

// 未激活步骤的文字、边框颜色
::v-deep .q-stepper__step--inactive {
  color: $theme-inactive;
  border-color: $theme-inactive;
}
// 未激活步骤的图标颜色
::v-deep .q-stepper__step--inactive .q-icon {
  color: $theme-inactive;
}
</style>

其他Quasar组件的通用解决思路 #

对于其他组件的自定义颜色问题，遵循以下步骤：

• 先查看组件官方文档，确认是否提供了对应的颜色属性，优先使用属性传值（传入自定义CSS变量或直接颜色值）
• 如果属性不生效，打开浏览器开发者工具，定位到目标元素的类名
• 使用深度选择器结合自定义SCSS变量覆盖对应类的样式

内容的提问来源于stack exchange，提问作者Alireza Hedayati