Ant Design 紧凑模式：3 种开关 + 4 个坑一次讲清-平芜编程栈

Ant Design 紧凑模式：3 种开关 + 4 个坑一次讲清

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design

屏幕空间有限、内容却越堆越多？Ant Design 紧凑模式把控件高度从 32px 压到 28px、字号从 14px 降到 12px，同一块屏幕大约能多塞 10%~15% 的内容，而且不用缩小字体、不用压掉点击区域。本文给你 3 种粒度的开启方式和最常见的 4 个坑，看完你自己就能判断该用哪种、样式坏了怎么查。

一、先对号入座：你的界面卡在哪儿

判断该用哪种紧凑方式，先看瓶颈在哪：

表格太挤、行与行之间喘不过气

行高不归紧凑算法管，归Table的size属性管。size="middle"比默认矮一档，size="small"再矮一档，先调它，再考虑全局紧凑模式，两者叠加收益最明显。

表单太长，字段一个摞一个

表单级做法：给Form加size="small"调低所有控件高度，再把挨在一起的输入框、下拉、按钮用Space.Compact包起来，字段之间贴边、边框不再重叠。适合审批单、入库登记这类字段密集且顺序固定的录入页。

整站风格要统一

在ConfigProvider里挂紧凑算法（见第六节），全站控件一起变矮。适合监控大屏、库存管理后台这种"从头看到尾都在看数据"的界面。

二、三分钟上手：Space.Compact 最短示例

AntD 紧凑模式怎么开？最小的改动就是给相邻控件套一层Space.Compact：

import { Space, Input, Button } from 'antd'; const FilterBar = () => ( <Space.Compact> <Input placeholder="输入仓库编号" /> <Button type="primary">查询库存</Button> <Button>重置</Button> </Space.Compact> );

三个组件拼成一根连续的条：输入框在左，两个按钮贴右，首尾圆角和中间边框自动处理，你不需要写任何样式。

什么时候该用：2~5 个相邻控件的成组场景，筛选栏、工具条、连续输入，这是影响范围最可控的紧凑方式。什么时候别用：别包整页。Space.Compact只管"挨在一起的一组"，外层间距和文字大小不归它管，包整页会丢失间距控制。

三、三种力度怎么选：局部、表单、全局

力度	开关方式	管什么	适合	别用在哪
局部	`Space.Compact`	把挨着的一组控件拼成一体：贴边、去重叠边框、统一圆角	筛选栏、工具条、审批单里挨着的字段	只有一两个控件的零散场景，包了反而多一层嵌套
表单	`Form`的`size="small"`+ 关键处`Space.Compact`	调低表单内所有控件高度，再让相邻字段贴边	字段多的录入页：审批单、入库登记	表单只有一两个字段时，直接小尺寸即可，不必加`Space.Compact`
全局	`ConfigProvider`的`theme.algorithm`挂`compactAlgorithm`	全站控件高度和间距批量变小，界面信息密度整体提升	监控大屏、库存管理后台这类长期盯数据的系统	营销页、文档页和数据界面混站里的站点，全变矮会风格混乱

单控件层面还有一个零成本选项：size="small"。它只是把某个控件调小，不做拼接，改动最轻但收益也最小。

四、它是怎么"变瘦"的：机制一瞥

两个词先解释一下：Token是 AntD 内部的一组设计变量（高度、字号、间距），改 Token 等于批量改样式；Context是 React 跨层级传值的方式，父级放进去的值，任意深度的子组件都能取到，不用逐层透传。

Space.Compact的工作就是往下传 Context（源码在 components/space/Compact.tsx）：

// 组件内部逻辑的简化版 const ctx = React.createContext(null); // 存方向、首尾标记、尺寸 // 每个子控件拿到后拼出类名： // ant-input-compact-item 我是紧凑组的一员 // ant-input-compact-first-item 我是首项（保留左上/左下圆角） // ant-input-compact-last-item 我是尾项（保留右上/右下圆角）

样式根据这些类名把圆角和边框接起来，"拼接感"就是这么来的。全局紧凑走的是另一条路：compactAlgorithm本质是批量改写 Token 的函数（源码在 components/theme/themes/compact/index.ts），核心动作就一行：

const controlHeight = mergedMapToken.controlHeight - 4;

controlHeight从 32 降到 28，字号基准降到 12px，所有读这些 Token 的组件跟着变矮。记住一句话：局部拼接靠类名，整体变矮靠 Token，所以全局紧凑和局部Space.Compact可以叠加。

五、避坑清单：最常被问的 4 个问题

首尾边框断裂怎么修

某个控件缺圆角或边框重叠？打开开发者工具看 DOM：正常的首项应带ant-input-compact-first-item这类类名。类名没了，多半是结构变了——控件外面多包了一层div，Space.Compact的第一个直接子节点变成了那层div而不是控件本身，首尾标记就标错位置了。去掉多余包裹层即可。

自定义组件怎么进紧凑组

自己的组件不会自动响应紧凑组，需要主动调用useCompactItemContext（同样从 components/space/Compact.tsx 导出）：

import { useCompactItemContext } from 'antd/es/space/Compact'; const MyWidget = () => { const { compactSize, compactItemClassnames } = useCompactItemContext('mywidget', 'horizontal'); return <div className={compactItemClassnames}>/* 按 compactSize 调自身高度 */</div>; };

不做这步的后果：别人都变矮了，只有它还是标准高度，整组像缺了一块。

嵌套紧凑组，谁覆盖谁

Space.Compact可以嵌在另一个Space.Compact里，首尾标记会按嵌套逻辑计算：外层是首项、内层又是首项，才标first-item。两层以内一般没问题；嵌套三层以上容易出重复圆角或缺角，建议一个分组内最多嵌套一层，内层分组圆角不对就拆出来单独放。另外局部想"退出"紧凑时，官方留了NoCompactStyle，用它包一层即可中断继承。

控件变矮后点击区过小

size="small"的按钮加紧凑高度后，点击区域会接近 24px，鼠标用户没问题，触控设备容易点空。触控为主的界面要么保持默认尺寸，要么给关键按钮补最小宽高；字号 12px 是紧凑算法的下限，不要再手动往下压，否则可读性先于省下的空间"消失"。

六、进阶：按需微调紧凑参数

compactAlgorithm只是把controlHeight减 4、字号基准降到 12 的固定函数。想要"30px 的中间档位"？把它复制一份改成自己的函数，再传给algorithm就行，多个算法按数组顺序叠加生效：

import { theme, ConfigProvider } from 'antd'; const { compactAlgorithm, darkAlgorithm } = theme; <ConfigProvider theme={{ algorithm: [compactAlgorithm, darkAlgorithm] }}> <App /> </ConfigProvider>

这就是 compactAlgorithm 配置的全部用法。注意：自定义算法一改，全站组件都跟着变，表格、表单、弹框都要重新走一遍视觉检查，先在预发环境确认再合码。