vuetify文本框问题

问题遇到的现象和发生背景

vuetify的Text Fields在3.0版本中只能显示filled样式的，在codepen中测试却可以。codepen链接，本地的3.0

用代码块功能插入代码，请勿粘贴截图。

<v-app>
    <v-container>
      <v-form class="register_input">
            <v-text-field
              v-model="user_name"
              label="用户名"
              clearable
              outlined
              color="blue"
              counter=10
              :rules="name_rules"
            ></v-text-field>
            <v-text-field
              v-model="user_password"
              outlined
              :append-icon="password_show ? 'mdi-eye' : 'mdi-eye-off'"
              :rules="passworld_rules"
              :type="password_show ? 'text' : 'password'"
              label="密码"
              color="blue"
              @click:append="password_show = !password_show"
            ></v-text-field>
          </v-form>
    </v-container>
  </v-app>

data: () => ({
    user_name: null,
    user_password: null,
    name_rules: [
      v => !!v || '此处必须填写',
      v => v.length <= 10 || '用户名必须≤10个字',
      v => v.length >= 2 || '用户名必须≥2个字',
    ],
    passworld_rules: [
      v => !!v ||'此处必须填写',
      v => v.length >= 8 || '密码必须>8个字',
      
    ],
  })

.register_input{
  width=80%;
}

我的解答思路和尝试过的方法

我尝试了codepen，codepen正常，我想让outlined能在3.0中显示

望采纳。

codepen 我看它用的是2.x版本

你用3.0的话，请这样使用：

<v-text-field
      label="Outlined"
      placeholder="Placeholder"
      variant="outlined"></v-text-field>