如何修改Vuetify中v-btn的尺寸？现有方案失效求助

一、方案失效原因分析 #

1. 使用size="large"无效的原因 #

Vuetify的v-btn组件中，size属性和旧版的large布尔属性属于两套不同的尺寸控制逻辑：

• 单独写large时，是启用组件旧版的大尺寸样式，对应高度为44px；
• 而size="large"是组件统一尺寸规范后的配置，它对应的默认高度是36px，且组件会优先依据size属性生成v--size-default或v--size-large类，覆盖了旧版large属性的样式，导致高度不符合预期。

2. 手动添加v--size-large类无效的原因 #

v-btn会根据自身props动态生成并管理尺寸相关的类名，手动添加的v--size-large会被组件内部生成的优先级更高的类（比如v--size-default）覆盖。而且v--size-large本身就是对应size="large"的样式，它的高度就是36px，自然无法达到你要的44px效果。

二、两类属性的区别 #

• 单独存在的布尔属性（如large）：这是Vuetify早期组件的简写语法，写large等价于给组件传递large: true的props，这类属性直接绑定固定的样式集合（比如v-btn的large对应44px高度），配置逻辑相对固定。
• attr=value形式的属性（如size="large"）：这是Vuetify后期统一的灵活尺寸配置方式，size可接收多个预设值甚至自定义值（部分组件支持），组件会根据size的值动态生成对应的v--size-xxx类，对应的样式规则是统一的尺寸规范，和旧版布尔属性的样式可能不一致。

解决方案（保留44px高度+支持size传参） #

移除旧的large属性，通过自定义类结合动态props实现需求：

<template>
  <v-btn
    @click.prevent="clicked"
    :class="['some-classes', { 'btn-original-height': size === 'original' }]"
    :size="size !== 'original' ? size : 'large'"
    fluid
    block
    elevation="6"
  >
    {{ title }}
  </v-btn>
</template>

<style scoped>
.btn-original-height {
  height: 44px !important;
}
</style>

<script>
export default {
  props: {
    size: {
      type: String,
      default: 'original' // 默认保留原44px高度
    },
    title: {
      type: String,
      required: true
    }
  },
  methods: {
    clicked() {
      // 执行点击逻辑
    }
  }
}
</script>

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