Ant Design Notification 进度条颜色自定义基于 Component Token 的完整实现指南【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-designNotification全局提醒组件的自动关闭进度条默认采用蓝色主色渐变。在 ant-design 中开发者可以通过配置Notification 组件 TokenComponent Token来整体定制进度条颜色甚至传入 CSS 渐变值从而与品牌视觉无缝对齐。本文以仓库中progress-color示例为骨架讲解如何开启进度条、如何通过ConfigProvider注入自定义 Token、进度条样式在源码层的实现原理以及围绕颜色定制的进阶玩法。读完本文你可以掌握一套可直接运行、可自由扩展的通知进度条换肤方案。进度条功能开箱showProgress 与 pauseOnHover在讨论颜色定制之前需要先让进度条「显示出来」。Notification 的进度条由调用时的参数showProgress控制类型定义位于 notification/interface.tsexport interface ArgsProps { title?: React.ReactNode; description?: React.ReactNode; duration?: number | false; showProgress?: boolean; pauseOnHover?: boolean; // ... }showProgress为true时在通知框底部渲染一条随duration倒计时缩短的进度条duration设为false不自动关闭时进度条不会生效。pauseOnHover鼠标悬停时是否暂停倒计时。默认值在 useNotification.tsx 中为true。这两项参数同时存在于每条通知的ArgsProps、实例级配置NotificationConfig与全局配置GlobalConfigProps中见 notification/interface.ts意味着你可以只对单条通知开启也可以对某一 API 实例或整个应用全局开启。参考仓库中的 show-with-progress demo 可以直观对比pauseOnHover两个取值的差异const openNotification (pauseOnHover: boolean) () { api.open({ title: Notification Title, description: This is the content of the notification..., showProgress: true, pauseOnHover, }); }; Space Button typeprimary onClick{openNotification(true)}Pause on hover/Button Button onClick{openNotification(false)}Dont pause on hover/Button /Space通过 Component Token 定制进度条颜色progress-color示例的核心思路是为 Notification 组件声明progressBg组件 Token并在ConfigProvider的theme.components.Notification中注入该值。完整的可运行代码如下progress-color demoimport React from react; import { Button, ConfigProvider, notification } from antd; import { createStyles } from antd-style; const COLOR_BG linear-gradient(135deg,#6253e1, #04befe); const useStyle createStyles(({ cssVar, prefixCls, css }) ({ linearGradientButton: css .${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) { span { position: relative; } ::before { content: ; background: ${COLOR_BG}; position: absolute; inset: -1px; opacity: 1; transition: all ${cssVar.motionDurationSlow}; border-radius: inherit; } :hover::before { opacity: 0; } } , })); const App: React.FC () { const { styles } useStyle(); const [api, contextHolder] notification.useNotification(); const openNotification () { api.open({ title: Customize progress bar color, description: You can use component token to customize the progress bar color, showProgress: true, duration: 20, }); }; return ( ConfigProvider button{{ className: styles.linearGradientButton }} theme{{ components: { Notification: { progressBg: COLOR_BG, }, }, }} {contextHolder} Button typeprimary onClick{openNotification} Show custom progress color /Button /ConfigProvider ); }; export default App;这段代码的关键点theme.components.Notification.progressBg声明了新的进度条背景取值linear-gradient(135deg,#6253e1, #04befe)是一段从紫到蓝的斜向渐变进度条的显示依赖showProgress: true示例将duration设为 20 秒以便观察完整倒计时过程示例同时借助 antd-style 的createStyles与 CSS 变量cssVar.motionDurationSlow把同一个渐变应用到主按钮上形成进度条颜色与页面主行动按钮的视觉呼应——这也是「配色联动」在实际产品中的常见做法。progressBg Token 的类型与默认值在源码层面progressBg是 Notification 的公开组件 Token 之一定义在 notification/style/index.ts 的ComponentToken接口中其语义注释明确为「提醒框进度条背景色」Background color of Notification progress bar。它默认不是纯色而是基于主题色生成的水平渐变// notification/style/index.ts const prepareComponentToken (token: AliasToken) ({ zIndexPopup: token.zIndexPopupBase CONTAINER_MAX_OFFSET 50, width: 384, progressBg: linear-gradient(90deg, ${token.colorPrimaryBorderHover}, ${token.colorPrimary}), // ... });因此不需要任何配置时进度条呈现的是colorPrimaryBorderHover → colorPrimary的 90 度渐变当你在主题中覆盖progressBg时本质上是替换了这一默认渐变值。你既可以传入品牌色纯色如#1677ff也可以像示例一样传入任意合法 CSSbackground值包括多段渐变。该 Token 适用的注入层级组件 Token 的注入必须位于渲染通知的contextHolder之上才能生效示例将ConfigProvider包裹在{contextHolder}外层正是为了保证这一点。若你使用静态方法notification.open(...)则应通过 notification/index.tsx 提供的notification.config()或notification.useNotification()在函数组件上下文中使用才能正确读取到主题上下文。若仅在局部弹出一条通知也可以在单条配置上自定义className/styles做临时覆盖但那是「语义化样式」的范畴见下文与全局主题 Token 的机制不同。源码视角进度条颜色是如何被应用的进度条在渲染层并非自绘的 div而是原生的 HTMLprogress元素其轨道与填充色的设置利用了浏览器原生的两个伪元素。实现位于 notification/style/notification.ts// Progress [${noticeCls}-progress]: { position: absolute, bottom: 0, display: block, appearance: none, inlineSize: calc(100% - ${unit(borderRadiusLG)} * 2), blockSize: notificationProgressHeight, border: 0, , ::-webkit-progress-bar: { borderRadius: borderRadiusLG, backgroundColor: rgba(0, 0, 0, 0.04), }, ::-moz-progress-bar: { background: progressBg, // Firefox }, ::-webkit-progress-value: { borderRadius: borderRadiusLG, background: progressBg, // Chrome / Safari / Edge }, },从这段样式可以得出几个实现事实轨道track颜色固定为rgba(0, 0, 0, 0.04)的浅灰圆角底无论是否定制都不会改变填充value颜色分别在::-moz-progress-barFirefox与::-webkit-progress-valueChromium/Safari中读取同一个progressBgtoken 作为background即我们自定义的值进度条高度来自内部衍生 tokennotificationProgressHeight默认值为2定义于 notification/style/index.ts 的prepareNotificationToken这与 CSS-in-JS 体系里「公开 token → 内部衍生 token → 生成样式」的链路一致progressBg公开组件 Token→prepareNotificationToken合并衍生 Token →genNotificationItemStyle消费生成.ant-notification-notice-progress样式。这也解释了为什么必须通过progressBg而非直接写 CSS 来换色该组件基于 CSS-in-JS 动态主题机制直接覆盖伪元素选择器既会与默认样式冲突也无法随主题/暗色模式联动。颜色定制的进阶玩法与组合技巧1. 把渐变换成动态主题色如果你的进度条希望跟随用户切换的主题色如企业换肤可以直接在ConfigProvider中引用派生出的 token而不必写死色值const App () { const { token } theme.useToken(); const [api, contextHolder] notification.useNotification(); return ( ConfigProvider theme{{ components: { Notification: { progressBg: linear-gradient(90deg, ${token.colorSuccess}, ${token.colorPrimary}), }, }, }} {contextHolder} {/* ... */} /ConfigProvider ); };2. 结合语义化样式Semantic DOM按需微调若你只需对某一条通知的进度条做临时视觉处理而不是全局换肤可以使用 Notification 提供的语义化 classNames/styles。在 notification/interface.ts 的NotificationSemanticType中progress是一个独立的语义节点与wrapper、title、description等并列支持传入classNames.progress或styles.progress进行定点覆盖api.open({ title: With custom progress style, showProgress: true, duration: 8, classNames: { progress: my-progress }, // 或 styles: { progress: { borderRadius: 8 } } });需要说明的是源码中进度条本体仍是progress元素语义节点的progress类名会落在该元素或其容器上适合做定位、高度等微调而颜色类统一走progressBgtoken更符合该组件的设计约束进度条实际渲染层由rc-component/notification提供见 PureList.tsx 中showProgress向底层NotificationListConfig的透传。3. 与消息类型容器色 token 组合使用progressBg之外Notification 还提供了colorSuccessBg、colorErrorBg、colorInfoBg、colorWarningBg四个「类型容器背景色」token见 notification/style/index.ts默认均为undefined即使用默认浮层背景它们用于解决不同场景下容器背景与文字颜色的对比度问题。实际产品中常把「成功态绿色进度条 成功态浅绿容器」组合增强状态的可感知性theme{{ components: { Notification: { progressBg: token.colorSuccess, // 进度条跟随语义色 colorSuccessBg: token.colorSuccessBg, // 成功通知容器浅色底 }, }, }}小结一条完整的定制链路回顾整个实现过程Notification 进度条颜色定制遵循的是 antd 5 组件 Token 的标准玩法开启showProgress必要前提并可配合pauseOnHover、duration控制交互与时长在渲染contextHolder外层的ConfigProvider.theme.components.Notification中写入progressBg支持纯色或任意 CSS 渐变源码层由 notification/style/index.ts 的prepareComponentToken提供默认渐变由 notification/style/notification.ts 消费并渲染为原生progress伪元素背景如需全局统一换肤用 ConfigProvider只需单条覆盖则用语义化classNames/styles.progress或单条style。参考仓库中的完整示例 progress-color demo 与 show-with-progress demo你可以直接运行体验并在其基础上替换为自己的品牌色与渐变策略。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Notification 进度条颜色自定义：基于 Component Token 的完整实现指南
Ant Design Notification 进度条颜色自定义基于 Component Token 的完整实现指南【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-designNotification全局提醒组件的自动关闭进度条默认采用蓝色主色渐变。在 ant-design 中开发者可以通过配置Notification 组件 TokenComponent Token来整体定制进度条颜色甚至传入 CSS 渐变值从而与品牌视觉无缝对齐。本文以仓库中progress-color示例为骨架讲解如何开启进度条、如何通过ConfigProvider注入自定义 Token、进度条样式在源码层的实现原理以及围绕颜色定制的进阶玩法。读完本文你可以掌握一套可直接运行、可自由扩展的通知进度条换肤方案。进度条功能开箱showProgress 与 pauseOnHover在讨论颜色定制之前需要先让进度条「显示出来」。Notification 的进度条由调用时的参数showProgress控制类型定义位于 notification/interface.tsexport interface ArgsProps { title?: React.ReactNode; description?: React.ReactNode; duration?: number | false; showProgress?: boolean; pauseOnHover?: boolean; // ... }showProgress为true时在通知框底部渲染一条随duration倒计时缩短的进度条duration设为false不自动关闭时进度条不会生效。pauseOnHover鼠标悬停时是否暂停倒计时。默认值在 useNotification.tsx 中为true。这两项参数同时存在于每条通知的ArgsProps、实例级配置NotificationConfig与全局配置GlobalConfigProps中见 notification/interface.ts意味着你可以只对单条通知开启也可以对某一 API 实例或整个应用全局开启。参考仓库中的 show-with-progress demo 可以直观对比pauseOnHover两个取值的差异const openNotification (pauseOnHover: boolean) () { api.open({ title: Notification Title, description: This is the content of the notification..., showProgress: true, pauseOnHover, }); }; Space Button typeprimary onClick{openNotification(true)}Pause on hover/Button Button onClick{openNotification(false)}Dont pause on hover/Button /Space通过 Component Token 定制进度条颜色progress-color示例的核心思路是为 Notification 组件声明progressBg组件 Token并在ConfigProvider的theme.components.Notification中注入该值。完整的可运行代码如下progress-color demoimport React from react; import { Button, ConfigProvider, notification } from antd; import { createStyles } from antd-style; const COLOR_BG linear-gradient(135deg,#6253e1, #04befe); const useStyle createStyles(({ cssVar, prefixCls, css }) ({ linearGradientButton: css .${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) { span { position: relative; } ::before { content: ; background: ${COLOR_BG}; position: absolute; inset: -1px; opacity: 1; transition: all ${cssVar.motionDurationSlow}; border-radius: inherit; } :hover::before { opacity: 0; } } , })); const App: React.FC () { const { styles } useStyle(); const [api, contextHolder] notification.useNotification(); const openNotification () { api.open({ title: Customize progress bar color, description: You can use component token to customize the progress bar color, showProgress: true, duration: 20, }); }; return ( ConfigProvider button{{ className: styles.linearGradientButton }} theme{{ components: { Notification: { progressBg: COLOR_BG, }, }, }} {contextHolder} Button typeprimary onClick{openNotification} Show custom progress color /Button /ConfigProvider ); }; export default App;这段代码的关键点theme.components.Notification.progressBg声明了新的进度条背景取值linear-gradient(135deg,#6253e1, #04befe)是一段从紫到蓝的斜向渐变进度条的显示依赖showProgress: true示例将duration设为 20 秒以便观察完整倒计时过程示例同时借助 antd-style 的createStyles与 CSS 变量cssVar.motionDurationSlow把同一个渐变应用到主按钮上形成进度条颜色与页面主行动按钮的视觉呼应——这也是「配色联动」在实际产品中的常见做法。progressBg Token 的类型与默认值在源码层面progressBg是 Notification 的公开组件 Token 之一定义在 notification/style/index.ts 的ComponentToken接口中其语义注释明确为「提醒框进度条背景色」Background color of Notification progress bar。它默认不是纯色而是基于主题色生成的水平渐变// notification/style/index.ts const prepareComponentToken (token: AliasToken) ({ zIndexPopup: token.zIndexPopupBase CONTAINER_MAX_OFFSET 50, width: 384, progressBg: linear-gradient(90deg, ${token.colorPrimaryBorderHover}, ${token.colorPrimary}), // ... });因此不需要任何配置时进度条呈现的是colorPrimaryBorderHover → colorPrimary的 90 度渐变当你在主题中覆盖progressBg时本质上是替换了这一默认渐变值。你既可以传入品牌色纯色如#1677ff也可以像示例一样传入任意合法 CSSbackground值包括多段渐变。该 Token 适用的注入层级组件 Token 的注入必须位于渲染通知的contextHolder之上才能生效示例将ConfigProvider包裹在{contextHolder}外层正是为了保证这一点。若你使用静态方法notification.open(...)则应通过 notification/index.tsx 提供的notification.config()或notification.useNotification()在函数组件上下文中使用才能正确读取到主题上下文。若仅在局部弹出一条通知也可以在单条配置上自定义className/styles做临时覆盖但那是「语义化样式」的范畴见下文与全局主题 Token 的机制不同。源码视角进度条颜色是如何被应用的进度条在渲染层并非自绘的 div而是原生的 HTMLprogress元素其轨道与填充色的设置利用了浏览器原生的两个伪元素。实现位于 notification/style/notification.ts// Progress [${noticeCls}-progress]: { position: absolute, bottom: 0, display: block, appearance: none, inlineSize: calc(100% - ${unit(borderRadiusLG)} * 2), blockSize: notificationProgressHeight, border: 0, , ::-webkit-progress-bar: { borderRadius: borderRadiusLG, backgroundColor: rgba(0, 0, 0, 0.04), }, ::-moz-progress-bar: { background: progressBg, // Firefox }, ::-webkit-progress-value: { borderRadius: borderRadiusLG, background: progressBg, // Chrome / Safari / Edge }, },从这段样式可以得出几个实现事实轨道track颜色固定为rgba(0, 0, 0, 0.04)的浅灰圆角底无论是否定制都不会改变填充value颜色分别在::-moz-progress-barFirefox与::-webkit-progress-valueChromium/Safari中读取同一个progressBgtoken 作为background即我们自定义的值进度条高度来自内部衍生 tokennotificationProgressHeight默认值为2定义于 notification/style/index.ts 的prepareNotificationToken这与 CSS-in-JS 体系里「公开 token → 内部衍生 token → 生成样式」的链路一致progressBg公开组件 Token→prepareNotificationToken合并衍生 Token →genNotificationItemStyle消费生成.ant-notification-notice-progress样式。这也解释了为什么必须通过progressBg而非直接写 CSS 来换色该组件基于 CSS-in-JS 动态主题机制直接覆盖伪元素选择器既会与默认样式冲突也无法随主题/暗色模式联动。颜色定制的进阶玩法与组合技巧1. 把渐变换成动态主题色如果你的进度条希望跟随用户切换的主题色如企业换肤可以直接在ConfigProvider中引用派生出的 token而不必写死色值const App () { const { token } theme.useToken(); const [api, contextHolder] notification.useNotification(); return ( ConfigProvider theme{{ components: { Notification: { progressBg: linear-gradient(90deg, ${token.colorSuccess}, ${token.colorPrimary}), }, }, }} {contextHolder} {/* ... */} /ConfigProvider ); };2. 结合语义化样式Semantic DOM按需微调若你只需对某一条通知的进度条做临时视觉处理而不是全局换肤可以使用 Notification 提供的语义化 classNames/styles。在 notification/interface.ts 的NotificationSemanticType中progress是一个独立的语义节点与wrapper、title、description等并列支持传入classNames.progress或styles.progress进行定点覆盖api.open({ title: With custom progress style, showProgress: true, duration: 8, classNames: { progress: my-progress }, // 或 styles: { progress: { borderRadius: 8 } } });需要说明的是源码中进度条本体仍是progress元素语义节点的progress类名会落在该元素或其容器上适合做定位、高度等微调而颜色类统一走progressBgtoken更符合该组件的设计约束进度条实际渲染层由rc-component/notification提供见 PureList.tsx 中showProgress向底层NotificationListConfig的透传。3. 与消息类型容器色 token 组合使用progressBg之外Notification 还提供了colorSuccessBg、colorErrorBg、colorInfoBg、colorWarningBg四个「类型容器背景色」token见 notification/style/index.ts默认均为undefined即使用默认浮层背景它们用于解决不同场景下容器背景与文字颜色的对比度问题。实际产品中常把「成功态绿色进度条 成功态浅绿容器」组合增强状态的可感知性theme{{ components: { Notification: { progressBg: token.colorSuccess, // 进度条跟随语义色 colorSuccessBg: token.colorSuccessBg, // 成功通知容器浅色底 }, }, }}小结一条完整的定制链路回顾整个实现过程Notification 进度条颜色定制遵循的是 antd 5 组件 Token 的标准玩法开启showProgress必要前提并可配合pauseOnHover、duration控制交互与时长在渲染contextHolder外层的ConfigProvider.theme.components.Notification中写入progressBg支持纯色或任意 CSS 渐变源码层由 notification/style/index.ts 的prepareComponentToken提供默认渐变由 notification/style/notification.ts 消费并渲染为原生progress伪元素背景如需全局统一换肤用 ConfigProvider只需单条覆盖则用语义化classNames/styles.progress或单条style。参考仓库中的完整示例 progress-color demo 与 show-with-progress demo你可以直接运行体验并在其基础上替换为自己的品牌色与渐变策略。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考