Ant Design 紧凑模式一键开启指南：Space.Compact 与全局算法怎么选

Ant Design 紧凑模式一键开启指南：Space.Compact 与全局算法怎么选

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

后台列表页翻到第三屏，搜索按钮还沉在折行下面；表格多塞两列，整个页面开始横向滚动。Ant Design 的紧凑模式就是为解决这类"屏幕不够用"而设计的空间优化开关。它不改变组件功能，只把控件高度、字体和间距整体调小，让同样的屏幕多装下两三行数据。下面按"你要解决什么问题"的顺序，讲清楚三种紧凑能力分别用在哪里、翻车了怎么排查。

先判断：局部贴边用 Space.Compact，整站瘦身用 compactAlgorithm

紧凑这件事在 Ant Design 里是两层独立的开关，选错层是新手最常见的坑。

第一层是Space.Compact，它只影响被它包裹的那几个相邻组件，把它们"焊"在一起：去掉间隙、合并重叠的边框。适合搜索框+按钮、输入框+下拉这类成组控件。

第二层是theme.compactAlgorithm全局算法，它改变的是整套 Design Token——所有组件的高度、间距、字号都会跟着变。适合数据密集型的整个后台。

简单记法：Space.Compact 管"谁挨着谁"，compactAlgorithm 管"所有东西有多大"。两者可以叠加使用，互不冲突。

全局紧凑配置的写法和实际效果

想让整个应用变紧凑，只需在 ConfigProvider 的 theme 里声明算法，compactAlgorithm从antd的theme导出。写法就一行：theme={{ algorithm: [compactAlgorithm] }}，暗色和紧凑还能写成[darkAlgorithm, compactAlgorithm]组合使用。官方说明见 docs/react/customize-theme.zh-CN.md。

具体缩了多少？看算法源码（components/theme/themes/compact/index.ts）：控件高度controlHeight直接减 4，即按钮、输入框从 40px 变成 36px，对应的 SM/XS/LG 尺寸按 0.75/0.5/1.25 比例联动；基础字号换成更小的fontSizeSM；间距序列则按sizeStep - 2重新推导，所以表格行高、表单上下间距会同步收紧。字体不变形，只是整体"缩了一号"。

注意它没有theme={{ compact: true }}这种简写，网上有些文章这么写是错的，实际属性只有algorithm。

搜索框与按钮贴紧的正确姿势

列表页的搜索区是最典型的场景：输入框、下拉、按钮横向排开，中间留出等宽空隙，视觉上很松散。用 Space.Compact 包一层即可：

import { Space, Input, Button, Select } from 'antd'; <Space.Compact block> <Select placeholder="状态" allowClear style={{ width: 120 }} /> <Input placeholder="请输入关键词" /> <Button type="primary">搜索</Button> </Space.Compact>

效果是三个控件无缝贴合、边框只画外轮廓，像一整个长条控件。补充两个实用属性：orientation="vertical"可改为纵向堆叠（direction已废弃，别再用）；block让组合撑满父容器宽度。

如果你只是想让控件彼此靠近但仍保留缝隙，那用Space的size调小间距就行，不需要 Compact。

紧凑布局样式翻车时的排查清单

⚠️ 紧凑样式"看起来不对"，九成是首尾标识丢了，先检查这一项再谈别的。

• 相邻控件边框重叠或缺失：Space.Compact 会给第一个子项加*-compact-first-item、最后一个加*-compact-last-item类，边框合并全靠这两个类。自定义组件没接这套上下文时，手动补上对应类名即可。
• 嵌套 Compact 时内层边框错位：嵌套是受支持的（demo 里有 compact-nested 示例），但内层的第一/最后一项是否"真首尾"会受外层影响，发现错位时给内层单独检查isFirstItem/isLastItem的判定结果。
• 某块区域不想参与紧凑：在 components/space/Compact.tsx 里导出了NoCompactStyle组件，把该区域包进去，内部上下文会被重置为 null，等于"退出紧凑"。
• 高度还是 40px：大概率是 compactAlgorithm 没生效，检查 ConfigProvider 层级是否被内层 provider 覆盖，以及组件是否用了写死的像素高度。

它是怎么做到的：一个 Context 把"紧凑"传下去

原理一句话：Space.Compact 用 React Context 把"紧凑尺寸、方向、是否首项/尾项"四样信息广播给子组件，子组件自行决定怎么变。

核心就在SpaceCompactItemContext和useCompactItemContext钩子（见 components/space/Compact.tsx）：

export interface SpaceCompactItemContextType { compactSize?: SizeType; compactDirection?: 'horizontal' | 'vertical'; isFirstItem?: boolean; isLastItem?: boolean; }

Button、Input、Select 等组件内部都会调useCompactItemContext(prefixCls, direction)，拿不到上下文就正常渲染；拿得到就追加-compact-item类、按compactSize调整尺寸。这也意味着你自己的封装组件想参与紧凑布局，同样只需调用这个钩子。而 NoCompactStyle 的实现更简单——直接把 Provider 的 value 设回 null。

收个尾：改动前过一遍这个清单

自查三件事：① 相邻控件边框是否只画了一圈外框；② 全局紧凑下字号是否为fontSizeSM而非继续缩到更小；③ 点击区域是否还够大——紧凑不意味着无限压缩，保持最小可点击尺寸别低于 24px 更稳妥。

把这三关过了，你的列表页大概率能少翻一屏。

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