Ant Design 紧凑模式完整指南3 步搞定高密度布局【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-designAnt Design 紧凑模式分两级Space.Compact把相邻控件拼成一个无间隙的组件组theme.compactAlgorithm则从主题层把控件高度、字号和间距整体收小。用对这两层一屏多放两三行数据、表单少滚一次屏都是可以直接量出来的收益。先看效果按钮从 40px 降到 36px控件整体收窄紧凑不是把样式压糊而是三件事同时发生控件高度降低、字号降一档、间距 token 整体收缩。以默认主题基础字号 14px、间距基数 sizeStep4为例维度默认紧凑变化来源控件高度Button / Input / Select40px36pxcontrolHeight - 4基础字号14px12px改用fontSizeSM基础间距size16px8px间距基数减 2大间距sizeLG24px12px同上小间距sizeSM8px4px同上表中数字基于默认主题推算实际值以你项目里theme.getToken()的返回值为准。紧凑算法的实现只有 20 来行核心逻辑在 components/theme/themes/compact/index.ts字号降到fontSizeSM、controlHeight减 4、再用genCompactSizeMapToken把所有尺寸 token 收一档。理解了这一点你就能解释界面上任何一处紧凑表现。三步进阶用法第一步 · Space.Compact 局部紧凑写法适用场景搜索栏、工具条这类输入框 按钮横向拼接的组合。import { Button, Input, Select, Space } from antd; export default function SearchBar() { return ( Space.Compact style{{ width: 100% }} Input placeholder输入订单号 style{{ width: 40% }} / Select placeholder状态 options{[{ value: all, label: 全部 }]} / Button typeprimary查询/Button /Space.Compact ); }组件会依次给子项挂上-compact-item、-compact-first-item、-compact-last-item三个类中间元素的左右边框只保留一条首尾保留圆角。实现见 components/space/Compact.tsx 里的useCompactItemContext。第二步 · 表单紧凑Form.Item 内嵌 Space.Compact适用场景字段多的录入表单一屏想塞下更多行。说明一点当前版本的Form没有独立的compact属性。表单紧凑是缩小行距 控件组内嵌Space.Compact的组合import { Form, Input, Row, Col, Space, Button } from antd; export default function LoginForm() { return ( Form layoutvertical style{{ rowGap: 12 }} Row gutter{12} Col span{12} Form.Item nameaccount label账号 Input / /Form.Item /Col Col span{12} Form.Item namepassword label密码 Input.Password / /Form.Item /Col /Row Form.Item Space.Compact style{{ width: 100% }} Input placeholder邀请码选填 / Button typeprimary注册/Button /Space.Compact /Form.Item /Form ); }行距由rowGap控制12 到 16 是常用区间控件组用Space.Compact收边。两层一起用表单密度可以明显提升。第三步 · 全局紧凑ConfigProvider 配置紧凑算法适用场景整个后台系统都需要高密度风格不想逐个页面调整。import { ConfigProvider, theme } from antd; export default function App() { return ( ConfigProvider theme{{ algorithm: [theme.darkAlgorithm, theme.compactAlgorithm] }} YourApp / /ConfigProvider ); }algorithm接收算法数组按顺序叠加执行——先 dark 再 compact得到暗色紧凑主题。注意是算法数组不是compact: true这种开关属性。自定义紧凑算法改 token 不改组件紧凑算法的配置边界是 Map Token它能调高度、字号、间距但不会动组件结构。想再激进一点把紧凑算法当作推导函数参考自己算一份 token 差量// themes/my-compact.ts import defaultAlgorithm from antd/es/theme/themes/default; export default function myCompact(token, mapToken) { const merged mapToken ?? defaultAlgorithm(token); return { ...merged, ...merged.genSizeMapToken({ ...token, sizeStep: token.sizeStep - 4 }), controlHeight: merged.controlHeight - 8, }; } // 使用ConfigProvider theme{{ algorithm: myCompact }}默认实现里sizeStep只减 2、controlHeight减 4减到 8 时控件会压到 32px 以下属于比较激进的配置上线前建议走一轮走查。避坑清单嵌套 Space.Compact 后首尾样式错位原因外层Compact会把嵌套组件本身标记为 last-item内层再按自己的子项独立标记两套标记叠在一起容易出现重复边框或丢圆角。 解法优先平铺确实要嵌套时内层Space.Compact自己会接管首尾判断见 components/space/Compact.tsx 第 140-143 行先确认子项 key 稳定再看渲染出来的类名是否符合预期。全局紧凑下想恢复某一段默认尺寸原因算法是主题级覆盖单靠 className 盖不回去。 解法局部断开上下文用NoCompactStyle同文件内导出把SpaceCompactItemContext置空包住该区域配合size属性手动指定尺寸。自定义组件在紧凑组里边框、圆角不对原因只有内置组件默认消费了紧凑上下文你的组件不读它就不会自适应。 解法调用useCompactItemContext(prefixCls, direction)把返回的compactItemClassnames挂到根节点用compactSize决定内部尺寸。紧凑后点击热区变小移动端误触增多原因紧凑算法把控件高度直接减 4px触控面积随之缩小。 解法触屏为主的产品慎用全局紧凑或给关键按钮单独设sizemiddle恢复 40px 高度。紧凑模式下列表文字显得更挤原因基础字号从 14px 降到 12px是算法的既定行为改用fontSizeSM作为基准。 解法对信息密度高的正文区域单独覆盖fontSize不要全局再压字号。怎么选型场景对照表场景推荐方式一句话理由搜索栏 / 工具条拼接Space.Compact只处理边框和圆角不改变全局长表单录入页Form 内嵌Space.Compact行距和控件组各调各的粒度最细整个中后台系统ConfigProvidercompactAlgorithm一处配置全应用生效不用逐页改暗色 高密度双需求algorithm: [darkAlgorithm, compactAlgorithm]算法数组顺序叠加暗色与紧凑互不冲突对默认紧凑值不满意自定义算法参考紧凑算法实现边界在 Map Token改值即可不动组件源码写在最后紧凑模式的决策其实就两条局部需求用Space.Compact全局需求用紧凑算法两者可以叠加但先全局再局部地排查问题会快很多。上线前重点检查三样首尾元素的边框类名、自定义组件是否接入了上下文、关键按钮的点击热区是否还在可接受范围。官方主题文档紧凑算法章节docs/react/customize-theme.zh-CN.md版本演进记录CHANGELOG.zh-CN.md【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考