如何单独增大Vuetify v-switch组件的尺寸？

如果不想全局修改所有开关，只调整单个/部分v-switch的尺寸，可以用以下两种方案：

自定义CSS类（推荐） #

给目标v-switch添加专属类名，再通过CSS精准调整组件内部元素的尺寸：

1. 在v-switch标签上添加自定义类：

<v-switch class="custom-large-switch" label="大尺寸开关"></v-switch>

2. 编写对应的CSS样式，按需调整轨道、滑块和标签的大小：

/* 调整开关轨道高度 */
.custom-large-switch .v-switch__track {
  height: 34px;
}
/* 调整滑块的宽高 */
.custom-large-switch .v-switch__thumb {
  width: 30px;
  height: 30px;
}
/* 可选：调整标签字体大小 */
.custom-large-switch .v-label {
  font-size: 19px;
}

这种方式只会作用于添加了该类的开关，不会影响全局其他组件。

内联样式（临时快速调整） #

如果只是临时测试或单个组件调整，也可以用内联样式直接修改，但灵活性不如自定义类：

<v-switch 
  label="临时大开关"
  style="--v-switch-track-height: 32px; --v-switch-thumb-size: 28px;"
></v-switch>

注：部分Vuetify版本支持通过CSS变量直接控制，若不生效则还是用自定义类的方式更可靠。

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