Vuetify 3：如何根据按钮尺寸定义对应字体大小？

在Vuetify 3中，你可以通过两种方式实现不同尺寸按钮的字体大小定制，替代原来单一的$typography或$button-font-size设置：

方法1：通过$typography嵌套配置 #

直接在$typography的button节点下，为不同尺寸（small/default/large）单独定义字体大小：

$typography: (
  'button': (
    'size': 14px, // 默认尺寸按钮的字体大小
    'small': (
      'size': 13px
    ),
    'large': (
      'size': 16px
    )
  )
);

方法2：覆盖Vuetify内置的按钮尺寸变量 #

Vuetify 3提供了针对不同按钮尺寸的单独字体变量，直接定义这些变量即可覆盖默认值：

// 小尺寸按钮字体
$button-small-font-size: 13px;
// 默认尺寸按钮字体
$button-default-font-size: 14px;
// 大尺寸按钮字体
$button-large-font-size: 16px;

注意事项 #

无论使用哪种方法，都要确保这些变量的定义在导入Vuetify核心样式之前，也就是你的settings.scss文件顺序要正确：先自定义变量，再引入Vuetify的样式文件。

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