Vuetify项目自定义字号与字重能否转为Utility Classes？

Vuetify默认的工具类确实只提供预设的字号（比如text-h4）和字重（比如font-weight-regular），但可以通过两种方式实现自定义数值的工具类：

1. 扩展Vuetify的预设配置 #

在Vuetify的初始化配置中，你可以扩展typography系统，添加自定义的字号和字重选项，让框架自动生成对应的工具类：

配置示例（Vue 3 + Vuetify 3） #

// vuetify.js
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    // 主题配置...
  },
  typography: {
    // 添加自定义字号
    'text-22px': {
      fontSize: '22px'
    },
    'text-24px': {
      fontSize: '24px'
    },
    // 添加自定义字重
    fontWeight: {
      600: '600'
    }
  }
})

配置完成后，你就可以直接在组件中使用这些自动生成的工具类：

<span class="ma-0 text-22px font-weight-600" style="color: var(--Gray-001, #7f7f7f);">Welcome to our shop </span>

2. 手动编写全局自定义工具类 #

如果不想修改Vuetify的核心配置，也可以在全局CSS文件（比如styles/main.css）中直接定义自定义工具类：

/* 自定义字号工具类 */
.text-22px {
  font-size: 22px !important;
}
.text-24px {
  font-size: 24px !important;
}

/* 自定义字重工具类 */
.font-weight-600 {
  font-weight: 600 !important;
}

之后在组件中直接引用这些类即可，用法和上面的示例一致。

注意：如果遇到样式优先级问题，可以添加!important确保自定义工具类覆盖Vuetify的默认样式，或者通过CSS选择器优先级调整来解决。

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