如何在Vue项目的Vuetify预设中统一设置按钮圆角默认值？

要在Vuetify中统一设置所有按钮的圆角，无需自定义CSS类或SCSS变量，直接在vuetify.js文件中通过配置即可实现，以下是两种常用方式：

方式一：仅针对按钮组件设置默认样式 #

这种方式精准控制所有v-btn的默认属性，不会影响其他组件：

打开你的vuetify.js，在Vuetify实例配置中添加defaults字段：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify({
  defaults: {
    VBtn: {
      // 统一设置圆角为2px
      rounded: '2px',
      // 可选：同步设置你之前自定义的宽、高、字体大小
      width: '200px',
      height: '40px',
      style: 'font-size: 16px;'
    }
  }
})

createApp(App).use(vuetify).mount('#app')

设置完成后，所有v-btn组件会自动应用这些默认样式，你可以直接删除之前的.confirmBtn类及对应的CSS代码。如果个别按钮需要特殊样式，只需在组件上单独覆盖属性即可（比如<v-btn rounded="0">），无需使用!important。

方式二：全局覆盖所有组件的默认圆角 #

如果你希望整个应用的所有组件（卡片、输入框等）都使用统一的圆角，可以修改全局主题变量：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify({
  theme: {
    variables: {
      // 全局默认圆角设为2px，所有依赖该变量的组件都会自动应用
      borderRadius: 2
    }
  }
})

createApp(App).use(vuetify).mount('#app')

这种方式会影响所有使用Vuetify默认圆角的组件，适合需要全局统一风格的场景。

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