Ant Design Table 组件 Token 定制指南基于 ConfigProvider 深度自定义表格样式【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读本文围绕 Ant Design 中 Table 组件的组件 TokenComponent Token定制能力展开讲解如何通过ConfigProvider的theme.components.Table配置项在不写一行 CSS 的情况下对表格的表头、行、单元格、过滤下拉、展开按钮、Footer 等数十个维度进行主题化定制。读完本文你将掌握 Table 全部组件 Token 的含义、默认值与三档尺寸large / middle / small的映射关系并可以直接将文中的完整示例复制到你的 React 项目中运行。一、什么是组件 Token在 Ant Design 的 Design Token 体系中Token 分为两层全局 TokenGlobal Token如colorPrimary、borderRadius、fontSize等影响所有组件组件 TokenComponent Token以组件为单位定义的样式变量如 Table 的headerBg、cellPaddingBlock只作用于该组件内部。组件 Token 通过ConfigProvider的theme.components注入是官方推荐的主题定制入口。在 theme 的接口定义 中每个组件都导出了自己的ComponentToken类型Table 的组件 Token 定义位于 components/table/style/index.ts。仓库中对应的演示文档与源码是文档说明components/table/demo/component-token.md组件 Token / Component Token完整演示代码components/table/demo/component-token.tsx二、Table 组件 Token 完整清单与默认值Table 的组件 Token 全部定义在 components/table/style/index.ts 的ComponentToken接口中。默认值由prepareComponentToken函数components/table/style/index.ts基于全局 Token 计算得出。Token 名称说明默认值来自prepareComponentTokenheaderBg表头背景colorFillAlter叠加到容器色后的实色headerColor表头文字颜色colorTextHeadingheaderSortActiveBg表头排序激活态背景colorFillSecondary实色化headerSortHoverBg表头排序激活态悬浮背景colorFillContent实色化bodySortBg排序列单元格背景colorFillAlter实色化rowHoverBg行悬浮背景colorFillAlter实色化rowSelectedBg行选中背景controlItemBgActiverowSelectedHoverBg行选中且悬浮背景controlItemBgActiveHoverrowExpandedBg展开行背景colorFillAltercellPaddingBlock单元格纵向内边距默认大尺寸padding16cellPaddingInline单元格横向内边距默认大尺寸padding16cellPaddingBlockMD中等尺寸纵向内边距paddingSM12cellPaddingInlineMD中等尺寸横向内边距paddingXS8cellPaddingBlockSM小尺寸纵向内边距paddingXS8cellPaddingInlineSM小尺寸横向内边距paddingXS8borderColor表格边框/分割线颜色colorBorderSecondaryheaderBorderRadius表头圆角borderRadiusLGfooterBgFooter 背景colorFillAlter实色化footerColorFooter 文字颜色colorTextHeadingcellFontSize单元格文字大小大尺寸fontSize14cellFontSizeMD单元格文字大小中等尺寸fontSize14cellFontSizeSM单元格文字大小小尺寸fontSize14headerSplitColor表头分割线颜色colorBorderSecondaryfixedHeaderSortActiveBg固定表头排序激活态背景colorFillSecondary实色化headerFilterHoverBg表头过滤按钮悬浮背景colorFillContentfilterDropdownMenuBg过滤下拉菜单项背景colorBgContainerfilterDropdownBg过滤下拉菜单背景colorBgContainerexpandIconBg展开按钮背景colorBgContainerselectionColumnWidth选择列宽度controlHeightstickyScrollBarBgSticky 模式滚动条背景colorTextPlaceholderstickyScrollBarBorderRadiusSticky 模式滚动条圆角100此外源码中还有一组带internal标记的内部 TokenexpandIconMarginTop、expandIconHalfInner、expandIconSize、expandIconScale、headerIconColor、headerIconHoverColor它们用于展开图标与表头图标的内部计算属于实现细节不建议在业务中直接覆写。说明源码中prepareComponentToken使用TinyColor.onBackground()将半透明填充色叠到容器背景上得到实色化默认值因此即使你只修改全局 TokenTable 的默认外观也会联动变化——组件 Token 是全局 Token 的派生层。三、实战用 ConfigProvider 一键换肤 Table仓库演示 components/table/demo/component-token.tsx 展示了最典型的用法用ConfigProvider包裹Table在theme.components.Table中覆写需要的 Token。import { ConfigProvider, Table } from antd; const App () ( ConfigProvider theme{{ components: { Table: { colorBgContainer: #e6f4ff, headerBg: #1677ff, headerColor: #fff, headerSortActiveBg: #0958d9, headerSortHoverBg: #69b1ff, bodySortBg: #1677ff10, rowHoverBg: #1677ff10, rowSelectedBg: #bae0ff, rowSelectedHoverBg: #91caff, rowExpandedBg: #1677ff10, cellPaddingBlock: 20, cellPaddingInline: 20, cellPaddingBlockMD: 16, cellPaddingInlineMD: 16, cellPaddingBlockSM: 12, cellPaddingInlineSM: 12, borderColor: #e6f4ff, headerBorderRadius: 0, footerBg: #1677ff, footerColor: #fff, cellFontSize: 16, cellFontSizeMD: 16, cellFontSizeSM: 14, headerSplitColor: #fff, headerFilterHoverBg: rgba(0, 0, 0, 0.12), filterDropdownMenuBg: #fff, filterDropdownBg: #fff, expandIconBg: #e6f4ff, }, }, }} Table columns{columns} dataSource{data} pagination{{ position: [none, bottomRight] }} / /ConfigProvider );运行后可以看到表头变为蓝色主色#1677ff、白色文字行悬浮/选中/展开呈现统一色系单元格内边距增大Footer 反色过滤下拉与展开按钮背景也同步调整。这正是组件 Token 的价值——一次配置全表生效无需任何 CSS。关键要点Token 放在theme.components.Table下而不是theme.token。前者是组件级后者是全局级颜色支持任意合法 CSS 颜色值包括#1677ff10这样的 8 位十六进制带透明度以及rgba(...)数值类 Token 直接传数字如cellPaddingBlock: 20无需带单位ConfigProvider可嵌套内层配置会覆盖外层便于做局部区域的差异化定制。四、三档尺寸size与 Token 的映射关系Table 的size属性large/middle/small与填充、字号 Token 一一对应size 属性纵向内边距横向内边距字号large默认cellPaddingBlockcellPaddingInlinecellFontSizemiddlecellPaddingBlockMDcellPaddingInlineMDcellFontSizeMDsmallcellPaddingBlockSMcellPaddingInlineSMcellFontSizeSM这层映射在源码中通过mergeToken完成genStyleHooks将组件 Token 合并进TableToken如tablePaddingVertical: cellPaddingBlock见 components/table/style/index.ts。随后 size.ts 中的getSizeStyle根据table-${size}类名将对应内边距应用到title、footer、cell、thead、tbody等元素上const getSizeStyle (size, paddingVertical, paddingHorizontal, fontSize) ({ [${componentCls}${componentCls}-${size}]: { fontSize, [ ${componentCls}-title, ${componentCls}-footer, ${componentCls}-cell, ${componentCls}-thead tr th, ${componentCls}-tbody tr th, ${componentCls}-tbody tr td, tfoot tr th, tfoot tr td ]: { padding: ${paddingVertical} ${paddingHorizontal}, }, }, });因此定制时要注意如果业务中同时使用多种size应分别覆写对应的 MD / SM Token否则middle/small尺寸仍会走默认值。演示代码中即同时设置了三种尺寸的 padding 与 fontSize。五、演示中的其他配套能力为了更直观地验证 Token 效果component-token.tsx 还在表格上方提供了一组控制项FormSwitch/Radio.Group可以动态切换Bordered开关边框样式对应bordered属性loading加载态Title / Column Header / Footer开关标题、表头、Footer 的显示Expandable展开行渲染expandedRowRenderCheckbox行选择列rowSelectionFixed Header / Table Scroll纵向scroll.y 240固定表头、横向scroll.x滚动或固定列Ellipsis单元格文本省略Sizelarge / middle / small 三档切换可直接观察上一节 Token 映射效果Pagination Top / Bottom分页位置控制pagination.position。这些开关覆盖了 Table 最常用的交互状态配合 Token 配置即可一次性验收表头、行悬浮、行选中、展开行、Footer、过滤、排序等全部视觉状态适合作为主题联调的参考脚手架。六、在官方文档中查阅 TokenTable 的 index.zh-CN.md 在主题变量Design Token章节通过ComponentTokenTable componentTable /动态渲染 Token 表格展示每个 Token 的说明与当前主题下的默认值是查阅完整清单的最直接入口。当你修改 Token 后刷新页面该表会实时反映新值便于对照调试。七、总结组件 Token 是 Table 主题定制的官方入口通过ConfigProvider theme.components.Table注入覆盖表头、行、单元格、过滤、展开、Footer、Sticky 滚动条等全部视觉维度Token 按尺寸分档cellPaddingBlock/Inline、cellFontSize对应 largeMD / SM 后缀对应 middle / small混用多种尺寸时需分别覆写Token 从全局 Token 派生改全局色板会联动默认外观覆写组件 Token 可实现精确的局部控制完整可运行的示例见 component-token.tsxToken 定义与默认值见 components/table/style/index.ts。通过组件 Token你可以在不引入任何 CSS 文件的前提下将 Table 的外观完全纳入项目的主题体系实现品牌化、统一化、可维护的表格样式管理。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考