如何在不破坏样式的情况下缩放Ant Design 5字体主题

使用Ant Design 5时，默认字体过小，多数用户难以阅读。尝试通过ConfigProvider修改主题token的fontSize为18，还试过调整controlHeight、lineHeight等参数，但所有Antd组件样式出现错乱。查阅官方自定义主题文档及主题编辑器后，仍无法实现整体缩放，字体增大后内边距、外边距未同步适配，求简便方法实现整体缩放且不影响界面美观。

尝试代码示例 #

<ConfigProvider
    theme={{
      token: {
        fontSize: 18, 
        // controlHeight: 20, tried playing with this
        // lineHeight: 22, tried playing with this
        // size: 10, tried playing with this
      },
    }}
>

1. CSS Transform 全局缩放（最快捷） #

给包裹ConfigProvider的外层容器添加缩放样式，实现整体等比放大，同时修正容器尺寸避免溢出：

.antd-scale-wrapper {
  transform: scale(1.2); /* 按需调整缩放比例，1.2=放大20% */
  transform-origin: top left;
  width: calc(100% / 1.2);
  min-height: calc(100vh / 1.2);
}

这种方式能保证组件的间距、尺寸完全等比适配，不会出现样式错位，适合快速实现需求。

2. 批量关联主题Token（符合Antd设计规范） #

Antd的主题Token是相互关联的，单独修改fontSize会打破原有比例，需同步调整相关Token以维持设计一致性：

<ConfigProvider
  theme={{
    token: {
      fontSize: 18,
      sizeUnit: 4, // 基础单位，可按比例微调
      controlHeight: 39, // 保持字体与控件高度的比例（18*2.17≈39）
      lineHeight: 1.8,
      // 同步调整间距类Token
      paddingXS: 6,
      paddingSM: 8,
      paddingMD: 12,
      paddingLG: 16,
    },
  }}
>

可借助主题编辑器查看Token间的依赖关系，确保调整后各元素比例协调。

3. 全局覆盖CSS变量 #

利用Antd暴露的全局CSS变量直接修改基础样式，适合静态主题场景：

:root {
  --ant-font-size-base: 18px;
  --ant-control-height: calc(var(--ant-font-size-base) * 2.2);
  --ant-line-height-base: 1.8;
  --ant-padding-xs: 6px;
  --ant-padding-sm: 8px;
  --ant-padding-md: 12px;
  --ant-padding-lg: 16px;
}

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