antd Segmented 组件 Token 定制用 ConfigProvider 覆盖分段控制器的颜色体系【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-designAnt Designantd的 Segmented 组件自antd4.20.0起提供用于在多个选项中单选并驱动关联区域内容切换。本文以仓库中 自定义组件 Token 演示 为核心完整讲解如何通过ConfigProvider的theme.components.Segmented覆盖组件级 Design Token以及这些 Token 在 样式实现 中如何一步步变成真实的 CSS 效果帮助你在不侵入组件内部样式的前提下完成品牌化定制。演示通过 ConfigProvider 自定义组件 Tokencomponents/segmented/demo/componentToken.md 对应演示 componentToken.tsx 的完整代码如下——它是 antd 组件 Token 定制的标准范式在ConfigProvider的theme.components下按组件名Segmented组织键名即组件 Token 名import React from react; import { ConfigProvider, Segmented } from antd; const Demo: React.FC () ( ConfigProvider theme{{ components: { Segmented: { itemColor: #222, itemHoverColor: #333, itemHoverBg: rgba(0, 0, 0, 0.06), itemSelectedBg: #aaa, itemActiveBg: #ccc, itemSelectedColor: #fff, }, }, }} Segmented options{[Daily, Weekly, Monthly, Quarterly, Yearly]} / /ConfigProvider ); export default Demo;这段代码覆盖了 6 个 Token分别对应 Segmented 的三种交互态常态itemColor选项文本颜色悬浮态itemHoverColor、itemHoverBg文本与背景激活态itemActiveBg按下瞬间的背景选中态itemSelectedBg、itemSelectedColor选中项的背景与文本。未被覆盖的 Token如容器内边距、轨道背景会继续沿用默认值因此这是一个“最小侵入”的定制方式。Segmented 组件 Token 全表组件 Token 的完整清单定义在 components/segmented/style/index.ts 的ComponentToken接口中共 8 个默认值由同文件的 prepareComponentToken 给出引用全局种子/派生 TokenToken类型默认值来自全局 Token说明itemColorstringcolorTextLabel选项文本颜色itemHoverColorstringcolorText选项悬浮态文本颜色itemHoverBgstringcolorFillSecondary选项悬浮态背景颜色itemActiveBgstringcolorFill选项激活态按下背景颜色itemSelectedBgstringcolorBgElevated选项选中时背景颜色itemSelectedColorstringcolorText选项选中时文字颜色trackPaddingstring \| numberlineWidthBoldSegmented 控件容器的 paddingtrackBgstringcolorBgLayoutSegmented 控件容器轨道背景色官方文档页 components/segmented/index.zh-CN.md 末尾的「主题变量Design Token」章节通过ComponentTokenTable组件动态渲染同一份清单可直接在线查阅。注意默认值全部是对全局 Token 的引用而非硬编码色值当你切换theme.algorithm如暗色算法时未被覆盖的 Token 会随主题自适应变化只有你在components.Segmented中显式写死的值才会保持固定。组件 Token 如何生效从 ConfigProvider 到 CSS从源码结构看自定义 Token 的落地链路分三步1. 合并阶段。ConfigProvider将theme写入DesignTokenContext随后 components/theme/useToken.ts 中的getComputedToken遍历overrideToken.components把Segmented下的键值对象并入该组件的派生 Token形成mergedDerivativeToken。也就是说components.Segmented: { itemColor: #222 }最终会以itemColor: #222的形式出现在 Segmented 自己的 token 里覆盖prepareComponentToken的默认值。2. 生成阶段。components/segmented/style/index.ts 末尾通过genStyleHooks(Segmented, styleGenerator, prepareComponentToken)注册样式钩子第三个参数正是上文的默认 Token 提供者内部经mergeToken将全局 Token、默认组件 Token 与用户覆盖值合并为SegmentedToken。Segmented组件本身在 components/segmented/index.tsx 中调用useStyle(prefixCls)取回wrapCSSVar与hashId包裹RcSegmented渲染保证样式与组件一一对应。3. 应用阶段。各 Token 在 genSegmentedStyle 中的具体落点容器padding: token.trackPadding、color: token.itemColor、background: token.trackBgL101-L103选中项-selected应用itemSelectedBg背景附boxShadowTertiary阴影与itemSelectedColor文本色L66-L71、L141-L144悬浮项:hover:not(-selected):not(-disabled)应用itemHoverColor并通过::after伪元素铺上itemHoverBg背景L161-L166。::after设置了pointerEvents: none用于保证背景层不参与命中检测避免影响点击与 hover 判定源码注释引用了 issue #40888激活项:active状态下::after铺itemActiveBg文本色同样取itemHoverColorL167-L172即激活态文本颜色由itemHoverColor控制这是演示代码中一个容易被忽略的细节滑块拇指-thumb复用选中态背景itemSelectedBgL198-L202是选中项滑动动画的视觉载体。另一个值得留意的联动trackPadding不只是容器内边距选项标签高度由controlHeight - 2 × trackPadding计算得出L83-L94-lg/-sm尺寸各有对应公式因此调大trackPadding会同步压缩选项可用高度定制时宜与trackBg一起评估。使用要点小结作用域theme.components.Segmented对ConfigProvider子树内所有Segmented生效嵌套的ConfigProvider可再覆盖形成局部主题按需覆盖只写需要改的键演示只写了 6 个trackPadding、trackBg走默认其余 Token 保持与全局主题联动可组合性组件 Token 可与theme.token全局 Token、theme.algorithm如暗色算法叠加显式覆盖值优先级最高验证方式仓库 components/segmented/tests/ 下的测试如 index.test.tsx覆盖了选中态类名、block/size变体、禁用与受控行为等可对照演示代码确认itemSelectedBg等 Token 所影响的ant-segmented-item-selected等类名结构从而用 DevTools 快速验证定制是否命中目标元素。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考