如何修改Vuetify 3默认排版样式？解决!important覆盖失效问题

由于Vuetify的text-h1、text-h2这类排版类自带!important声明，直接通过自定义CSS覆盖不会生效。正确的做法是通过修改Sass变量让框架重新生成包含新值的样式规则，具体步骤如下：

1. 配置自定义Sass变量文件 #

在项目中创建一个用于覆盖Vuetify变量的Sass文件，比如src/styles/variables.scss（路径根据你的项目结构调整，适配Vue CLI/Vite等不同构建工具）。

然后在Vuetify的配置文件（通常是plugins/vuetify.js或vuetify.js）中，确保这个自定义变量文件在Vuetify默认样式之前引入，示例配置：

// plugins/vuetify.js
import '~/styles/variables.scss' // 先加载自定义变量
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify({
  // 其他配置项
})

2. 覆盖指定排版变量 #

在自定义的variables.scss中，不需要复制完整的默认$typography映射，只需通过map-deep-merge覆盖你需要修改的部分。比如要将h1字号改为32px，代码如下：

// src/styles/variables.scss
$typography: map-deep-merge(
  $typography,
  (
    'h1': (
      'size': 32px,
      // 如需修改其他属性（如字重、行高），直接在此添加即可
      // 'weight': 400,
      // 'line-height': 1.5
    )
  )
);

map-deep-merge会自动将你的自定义配置与Vuetify默认的$typography映射合并，仅替换你指定的属性，其余保持默认值。

3. 多排版项批量修改示例 #

如果需要同时修改多个排版样式（比如h1和h2），只需在映射中添加对应项：

$typography: map-deep-merge(
  $typography,
  (
    'h1': (
      'size': 32px,
      'weight': 400
    ),
    'h2': (
      'size': 28px,
      'line-height': 32px
    )
  )
);

4. 验证效果 #

重启项目的开发服务器（Sass变量修改需要重新编译样式），此时使用text-h1等类时，框架生成的带!important的样式会自动应用你的新配置，无需额外CSS覆盖。

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