如何在VueJS+Vuetify项目中设置全局属性类扩展到所有/指定组件

Vuetify 中v-btn、v-tab等组件默认内置了text-transform: uppercase的样式规则，以下三种方案可以实现批量配置，无需逐个加class="text-none"：

方案1：自定义SASS变量（官方推荐，无副作用） #

通过修改Vuetify原生的SASS变量实现，不需要写覆盖样式，也不会出现优先级冲突：

1. 新建自定义变量文件src/styles/vuetify-variables.scss，按需配置需要取消大写的组件对应变量：

// 仅对v-btn生效
$button-text-transform: none !default;
// 仅对v-tab生效
$tab-text-transform: none !default;
// 其他需要取消大写的组件可自行添加对应变量，比如v-chip：$chip-text-transform: none !default
// 如果要全局所有组件都取消大写，直接补全所有带默认大写的组件变量即可

2. 项目配置中引入该变量文件：

Vuetify 3 + Vite 配置示例（vite.config.js） #

import { defineConfig } from 'vite'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vuetify({
      styles: {
        configFile: 'src/styles/vuetify-variables.scss',
      },
    }),
  ],
})

Vuetify 2 + Vue CLI 配置示例（vue.config.js） #

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/styles/vuetify-variables.scss";`
      }
    }
  }
}

方案2：全局CSS覆盖（快速生效，适配局部场景） #

适合快速调试、不需要修改构建配置的场景，直接在全局样式文件（比如App.vue的<style>块、global.css）中添加规则：

全局所有目标组件生效 #

.v-btn, .v-tab {
  text-transform: none !important;
}

仅指定页面/模块生效 #

给需要生效的容器加自定义类名即可，其他模块不受影响：

/* 只有带no-uppercase类的容器下的组件才会取消大写 */
.no-uppercase .v-btn, .no-uppercase .v-tab {
  text-transform: none !important;
}

使用时在对应页面最外层添加包裹：

<template>
  <div class="no-uppercase">
    <!-- 这个页面里的v-btn、v-tab都会自动取消大写 -->
    <v-btn>按钮</v-btn>
    <v-tab>标签</v-tab>
  </div>
</template>

方案3：全局封装组件（灵活度最高，适合多自定义需求） #

如果除了取消大写之外，后续还要给组件加其他默认属性，可以自己封装一层公共组件，全局注册后直接使用：

1. 新建封装组件src/components/CustomBtn.vue

<template>
  <!-- Vuetify2写法 -->
  <v-btn class="text-none" v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </v-btn>
  <!-- Vuetify3写法，不需要单独绑定$listeners -->
  <!-- <v-btn class="text-none" v-bind="$attrs">
    <slot></slot>
  </v-btn> -->
</template>

2. 在main.js全局注册：

// Vuetify3写法
import { createApp } from 'vue'
import CustomBtn from './components/CustomBtn.vue'

const app = createApp(App)
// 可以用自定义名称调用，也可以直接覆盖原生v-btn名称
app.component('CustomBtn', CustomBtn)
// app.component('v-btn', CustomBtn) // 直接覆盖的话原来的v-btn写法不用改，自动生效
app.mount('#app')

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