Vuetify 2迁移至3：rounded、flat及.v-application样式适配求助

1. <v-select> 的 rounded 和 flat 属性迁移 #

原 Vuetify 2 代码示例 #

<v-select
  rounded
  flat
  label="选择项"
  :items="items"
></v-select>

Vuetify 3 正确写法 #

Vuetify 3 中，flat 属性替换为 variant="flat"；rounded 不再是布尔值，改为指定圆角尺寸的字符串值（原 rounded 布尔值的默认效果对应 rounded="md"，需要完全圆角可使用 rounded="full"）：

<v-select
  variant="flat"
  rounded="md"
  label="选择项"
  :items="items"
></v-select>

variant="flat" 语法错误排查 #

• 确认项目已完全切换到 Vue 3 + Vuetify 3 环境，Vue 3 模板支持双引号/单引号绑定属性
• 检查属性拼写（比如是否写成 varaint）
• 确保组件标签正确闭合（Vue 3 要求所有标签必须闭合，单标签需加 /，如 <v-select ... />）

2. <style> 中 .v-application 样式的处理 #

Vuetify 3 全局根容器类名从 .v-application 改为 .v-app，同时全局 CSS 变量命名规则也有调整：

原 Vuetify 2 样式示例 #

.v-application {
  background-color: #f5f5f5;
}
.v-application .text-primary {
  color: #1976d2;
}

Vuetify 3 适配后的样式 #

/* 替换根容器类名 */
.v-app {
  background-color: #f5f5f5;
}

/* 优先使用 Vuetify 3 全局颜色变量 */
.v-app {
  background-color: var(--v-theme-surface);
}
.v-app .text-primary {
  color: var(--v-theme-primary);
}

注意事项 #

• 如果样式带 scoped 属性，需用 :deep() 穿透作用域修改全局样式：

<style scoped>
:deep(.v-app) {
  background-color: #f5f5f5;
}
</style>

• 优先通过 createVuetify 的主题配置调整全局样式，减少直接覆盖内置类名的操作，降低维护成本。

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