Vuetify 3 如何禁用默认样式或提升自定义样式优先级？

在Vue2/Vuetify2环境中编写了大量如下自定义组件样式：

.custom_btn-contained {
  color: white !important;
  background-color: $color-primary !important;
  border-radius: 4px !important;
  font: normal normal 600 13px/16px Montserrat !important;
  letter-spacing: 1.16px;
  box-shadow: 0px 2px 3px #041E4240;
  min-width: 64px;
  height: 34px !important;
}

该样式在Vue2/Vuetify2中运行正常，但迁移到Vue3/Vuetify3后，font-weight等部分CSS属性未生效。审查CSS时发现全局样式中存在如下默认设置：

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-weight: normal;
}

取消该font-weight设置后自定义样式恢复正常，现需解决：如何禁用Vuetify的所有默认样式，或让自定义样式获得更高优先级？

一、提高自定义样式优先级 #

1. 使用更具体的选择器 #

结合Vuetify3组件的原生类名（如按钮的.v-btn）组合自定义类，提升选择器权重，减少对!important的依赖：

.v-btn.custom_btn-contained {
  color: white;
  background-color: $color-primary;
  border-radius: 4px;
  font: normal normal 600 13px/16px Montserrat;
  letter-spacing: 1.16px;
  box-shadow: 0px 2px 3px #041E4240;
  min-width: 64px;
  height: 34px;
  font-weight: 600; /* 单独声明确保权重覆盖全局重置 */
}

2. 针对Scoped样式使用深度选择器 #

若样式写在组件的<style scoped>中，通过深度选择器穿透作用域，确保样式能覆盖全局设置：

:deep(.custom_btn-contained) {
  /* 原有自定义样式 */
  font-weight: 600 !important; /* 必要时补充!important强化优先级 */
}

3. 单独声明冲突属性 #

将被全局重置覆盖的属性（如font-weight）单独提取并添加!important，避免被全局样式覆盖：

.custom_btn-contained {
  /* 原有样式内容 */
  font: normal normal 600 13px/16px Montserrat !important;
  font-weight: 600 !important; /* 单独声明强化优先级 */
}

4. 利用Vuetify3 CSS变量覆盖 #

Vuetify3基于CSS变量构建，可直接修改组件对应的变量值来覆盖默认设置：

.custom_btn-contained {
  --v-btn-font-weight: 600;
  /* 其他自定义样式 */
}

二、禁用Vuetify默认全局样式 #

1. 初始化时禁用Base样式 #

在创建Vuetify实例时，通过styles.base: false禁用包含全局*选择器重置的Base样式，注意：禁用后需自行处理全局布局基础配置（如box-sizing、margin等）：

import { createVuetify } from 'vuetify'

export default createVuetify({
  styles: {
    base: false, // 禁用默认全局基础样式
  },
})

2. 完全自定义样式配置 #

通过styles.configFile: false禁用Vuetify默认样式配置，引入自定义全局样式文件替代：

import { createVuetify } from 'vuetify'
import './custom-global-styles.css' // 自定义全局样式文件

export default createVuetify({
  styles: {
    configFile: false, // 禁用Vuetify默认样式配置
  },
})

custom-global-styles.css示例：

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  /* 移除font-weight: normal，或根据需求自定义全局样式 */
}

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