如何修改Vuetify 3.5.3中v-stepper的步骤图标尺寸？

针对Vuetify 3.5.3版本，你可以通过以下两种方式修改v-stepper内的步骤图标尺寸：

方案一：利用Vuetify内置CSS变量（推荐） #

Vuetify 3为组件提供了可自定义的CSS变量，直接覆盖--v-stepper-item-icon-size变量即可调整图标尺寸：

局部修改（仅针对当前组件） #

在组件的<style>标签中添加：

:deep(.v-stepper-item) {
  --v-stepper-item-icon-size: 48px; /* 替换成你需要的尺寸 */
}

全局修改（所有v-stepper组件生效） #

在全局样式文件（比如styles/main.css）中添加：

.v-stepper-item {
  --v-stepper-item-icon-size: 48px;
}

方案二：直接定位图标元素修改样式 #

如果变量覆盖不生效，可以直接通过深度选择器定位图标元素，强制设置宽高：

:deep(.v-stepper-item__icon) {
  width: 48px !important;
  height: 48px !important;
  font-size: 24px; /* 同步调整图标内数字/图标的大小，避免错位 */
}

结合你的代码示例的完整用法 #

把样式加到你的组件中即可：

<template>
  <v-stepper v-model="currentStep">
    <v-stepper-header>
      <v-stepper-item :color="orangeColor" title="Step 1" value="1" id="firstStep"></v-stepper-item>
      <v-divider></v-divider>
      <v-stepper-item :color="orangeColor" title="Step 2" value="2" id="secondStep"></v-stepper-item>
      <v-divider></v-divider>
      <v-stepper-item :color="orangeColor" title="Step 3" value="3" id="thirdStep"></v-stepper-item>
    </v-stepper-header>
  </v-stepper>
</template>

<style scoped>
:deep(.v-stepper-item) {
  --v-stepper-item-icon-size: 48px;
}
/* 或者用元素定位的方式 */
/*
:deep(.v-stepper-item__icon) {
  width: 48px !important;
  height: 48px !important;
  font-size: 24px;
}
*/
</style>

注意：如果使用了scoped样式，必须加上:deep()深度选择器才能穿透到Vuetify的内置组件样式。

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