如何在Vuetify@3 + Vite环境中创建圆角轮廓文本框？

• 直接给组件加rounded类替代属性：
  组件自带的rounded属性对outlined变体的作用范围可能不符合预期，改用Vuetify的utility类就能直接生效：

  <v-text-field
    v-model="modelValue"
    variant="outlined"
    class="rounded"
  ></v-text-field>
  

  要是需要更大的圆角，还可以换成rounded-lg、rounded-xl这类等级类。

• 全局配置默认开启圆角：
  如果想让所有文本框都默认带圆角，在初始化Vuetify时设置全局默认值即可：

  import { createVuetify } from 'vuetify'
  
  const vuetify = createVuetify({
    defaults: {
      VTextField: {
        rounded: true
      }
    }
  })
  

• 检查版本或样式冲突：
  3.1.11版本可能存在小bug，试试升级到最新版Vuetify：

  npm install vuetify@latest
  

  同时排查自己写的全局样式，有没有覆盖掉Vuetify的圆角规则（比如设置了border-radius: 0这类强制样式）。

内容的提问来源于stack exchange，提问作者S. Karathanassis