如何将<span>标签设置为Vuetify输入标签样式？

要把<span>改成Vuetify输入标签的常规样式，直接用内置类或者自定义类都能实现：

方法一：用Vuetify内置样式类 #

Vuetify本身提供了现成的标签样式类，直接给<span>加对应的类就能同步输入标签的样式：

• Vuetify 2版本：用v-label类

  <span class="v-label">Regular</span>
  

• Vuetify 3版本：用v-input__label类（对应输入框的原生标签结构）

  <span class="v-input__label">Regular</span>
  

要是拿不准具体类名，打开浏览器开发者工具，查看原生Vuetify输入框的标签元素，直接照搬它的类就行，这样能保证样式完全一致。

方法二：自定义复用类 #

担心版本更新导致内置类变化的话，可以自己提取Vuetify标签的核心样式，定义一个专属类：

/* 匹配Vuetify默认输入标签的基础样式 */
.vuetify-label {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 4px;
  display: block; /* 保持和输入标签一样的块级显示 */
}

然后直接用你想要的写法：

<span class="vuetify-label">Regular</span>

注意事项 #

• 确保项目已经全局引入了Vuetify的样式文件，不然内置类不会生效。
• 用内置类的话，会自动适配项目的主题（比如深色模式），自定义类需要自己额外处理主题切换逻辑。

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