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 typeprimary搜索/Button /Space.Compact效果是三个控件无缝贴合、边框只画外轮廓像一整个长条控件。补充两个实用属性orientationvertical可改为纵向堆叠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.tsxexport interface SpaceCompactItemContextType { compactSize?: SizeType; compactDirection?: horizontal | vertical; isFirstItem?: boolean; isLastItem?: boolean; }Button、Input、Select 等组件内部都会调useCompactItemContext(prefixCls, direction)拿不到上下文就正常渲染拿得到就追加-compact-item类、按compactSize调整尺寸。这也意味着你自己的封装组件想参与紧凑布局同样只需调用这个钩子。而 NoCompactStyle 的实现更简单——直接把 Provider 的 value 设回 null。收个尾改动前过一遍这个清单场景该用什么搜索框按钮要贴边成组Space.Compact整站/整个后台要缩小控件theme.compactAlgorithm紧凑区里某块要恢复默认NoCompactStyle只要间距小一点、不合并边框Space 的 size 属性纵向堆叠的紧凑输入组Space.Compact orientationvertical自查三件事① 相邻控件边框是否只画了一圈外框② 全局紧凑下字号是否为fontSizeSM而非继续缩到更小③ 点击区域是否还够大——紧凑不意味着无限压缩保持最小可点击尺寸别低于 24px 更稳妥。把这三关过了你的列表页大概率能少翻一屏。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考