Ant Design Alert 组件完全指南从基础用法到源码级实现原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读Alert警告提示是 Ant Design 中用于向用户展示需要关注信息的反馈类组件它适合承载非交互式、需要持续展示且可由用户主动关闭的静态提示内容。本文以 components/alert/index.en-US.md 为骨架结合组件源码、样式 token 与测试用例系统讲解 Alert 的 10 个核心 API、12 个官方示例场景、Alert.ErrorBoundary错误边界用法以及其在 CSS-in-JS 下的 Design Token 定制方式帮助你从会使用进阶到懂原理。使用场景When To Use根据官方文档Alert 适用于两类场景需要向用户展示警告/提示类信息例如操作结果反馈、风险提醒、系统公告需要一个持久存在的静态容器内容由用户主动操作点击关闭按钮来消除。与message/notification这类临时弹出、自动消失的轻量提示不同Alert 是常驻页面的静态组件用于承载需要用户看到并理解的上下文信息因此它更强调内容的可读性与可关闭性。快速上手最基础的用法从 components/alert/demo/basic.tsx 可以看到Alert 的最小使用方式只需一个message属性import React from react; import { Alert } from antd; const App: React.FC () Alert messageSuccess Text typesuccess /; export default App;components/alert/demo/style.tsx 则展示了四种内置类型success、info、warning、error分别对应成功、信息、警告、错误四种语义四种类型由type属性切换Alert messageSuccess Text typesuccess / Alert messageInfo Text typeinfo / Alert messageWarning Text typewarning / Alert messageError Text typeerror /需要说明的是type并非必填。查看 Alert.tsx 的源码可以发现组件内部对type做了记忆化合并const type React.useMemoAlertProps[type](() { if (props.type ! undefined) { return props.type; } // banner mode defaults to warning return banner ? warning : info; }, [props.type, banner]);即未显式传type时普通模式默认infobanner 模式默认warning。这与文档 API 表中info, inbannermode default iswarning的描述完全一致。核心 API 详解属性总览以下表格完整收录了 components/alert/index.en-US.md API 章节的全部属性PropertyDescriptionTypeDefaultVersionactionThe action of AlertReactNode-4.9.0afterCloseCalled when close animation is finished() void--bannerWhether to show as bannerbooleanfalse-closableThe config of closable5.15.0 支持aria-*boolean | ({ closeIcon?: React.ReactNode } React.AriaAttributes)false-descriptionAdditional content of AlertReactNode--iconCustom iconeffective whenshowIconis trueReactNode--messageContent of AlertReactNode--showIconWhether to show iconbooleanfalsebanner模式下默认为 true-typeType of Alert stylesoptions:success,info,warning,errorstringinfobanner模式下默认为warning-onCloseCallback when Alert is closed(e: MouseEvent) void--此外文档明确提示Common props 对所有组件通用例如rootClassName根元素 className、className、style、id等属性同样适用于 Alert详见 Common Props 文档。message 与 description标题与附加描述messageAlert 的主文案必填语义上的核心内容description附加的补充描述传入后组件会进入带描述布局with-description标题字号放大、图标加大、内边距随之调整。参考 components/alert/demo/description.tsxAlert messageSuccess Text descriptionSuccess Description Success Description Success Description typesuccess /从源码看当description存在时根节点会追加-with-description类名Alert.tsx样式层为它单独设计了withDescriptionPadding与withDescriptionIconSize两个专属 token详见下文 Design Token 章节。closable 与 onClose可关闭提示closable从 5.15.0 开始支持传入对象形式可在其中指定自定义关闭图标closeIcon以及任意aria-*无障碍属性Alert messageError Text descriptionError Description typeerror closable{{ aria-label: close, closeIcon: CloseSquareFilled /, }} onClose{onClose} /完整示例见 components/alert/demo/closable.tsx。这里有几个值得展开的细节1. 关闭回调onClose点击关闭按钮后触发回调参数为鼠标事件(e: MouseEvent) void在 Alert.tsx 中handleClose会先将内部closed状态置为true再调用外部传入的onClose。2. 关闭动画结束回调afterClose动画完全结束后触发。参考 components/alert/demo/smooth-closed.tsx它常用于关闭后从页面卸载 Alert的受控场景const [visible, setVisible] useState(true); const handleClose () { setVisible(false); }; return ( {visible ( Alert messageAlert Message Text typesuccess closable afterClose{handleClose} / )} Switch onChange{setVisible} checked{visible} disabled{visible} / / );3. 可关闭性的判定逻辑源码 Alert.tsx 中isClosable的判定优先级依次为closable为对象且含closeIcon→ 存在废弃的closeText→closable为布尔值 →closeIcon非false/null/undefined→ 兜底读取ConfigProvider全局配置alert?.closable。也就是说只要显式传了closeIcon或closeText即使没写closable也会显示关闭按钮。4. 默认关闭图标未自定义closeIcon时使用默认的CloseOutlinedAlert.tsx点击区域渲染为语义化的button typebutton元素。5. 废弃 APIcloseText旧版closeText已被标记为 deprecated控制台会输出升级提示官方建议迁移到closable.closeIconAlert.tsx。banner 模式通栏横幅banner为true时Alert 变成无圆角、无边框的通栏横幅常用于页面顶部公告并且默认展示图标showIcon默认值变为true、默认类型变为warning。参考 components/alert/demo/banner.tsxAlert messageWarning text banner / Alert messageVery long warning text banner closable / Alert showIcon{false} messageWarning text without icon banner / Alert typeerror messageError text banner /样式层面对应 style/index.ts 中的banner规则border: 0、borderRadius: 0保证通栏无缝衔接页面边缘。源码层面isShowIcon的默认逻辑是banner 且未显式传showIcon时强制为trueAlert.tsx。拓展玩法跑马灯公告。components/alert/demo/loop-banner.tsx 展示了把message换成任意 React 节点的能力——结合react-fast-marquee即可实现循环滚动的公告条Alert banner message{ Marquee pauseOnHover gradient{false} I can be a React component, multiple React components, or just some text. /Marquee } /这印证了一个重要事实message、description、action等属性均为ReactNode类型可以自由嵌入组件、图标乃至动画库。showIcon 与 icon图标控制showIcon是否展示类型图标默认falsebanner 模式下默认trueicon自定义图标仅在showIcon为true时生效。参考 components/alert/demo/icon.tsx 与 components/alert/demo/custom-icon.tsxAlert messageSuccess Tips typesuccess showIcon / Alert icon{SmileOutlined /} messageSuccess Tips typesuccess showIcon /源码中的IconNodeAlert.tsx维护了一张类型到图标的映射表const iconMapFilled { success: CheckCircleFilled, info: InfoCircleFilled, error: CloseCircleFilled, warning: ExclamationCircleFilled, };未传自定义icon时按type从映射表取出对应实心图标传入icon时则用replaceElement包一层${prefixCls}-icon容器。四个类型对应的图标分别是CheckCircleFilled成功、InfoCircleFilled信息、CloseCircleFilled错误、ExclamationCircleFilled警告。action自定义操作区action属性4.9.0 起支持用于在 Alert 右侧渲染操作按钮典型场景是UNDO 撤销、查看详情、接受/拒绝等。参考 components/alert/demo/action.tsxAlert messageSuccess Tips typesuccess showIcon action{Button sizesmall typetextUNDO/Button} closable /源码在渲染顺序上action位于contentmessage description之后、关闭按钮之前Alert.tsx样式上使用marginInlineStart: marginXS与内容区拉开间距style/index.ts。Alert.ErrorBoundaryReact 错误边界Alert.ErrorBoundary是挂在 Alert 上的静态子组件通过复合组件方式挂载见 index.tsx用于捕获子树中抛出的渲染错误并展示为错误提示避免整个页面白屏。APIPropertyDescriptionTypeDefaultVersiondescriptionCustom error description to showReactNode{{ error stack }}错误堆栈-messageCustom error message to showReactNode{{ error }}错误对象字符串化-用法示例参考 components/alert/demo/error-boundary.tsxconst { ErrorBoundary } Alert; const ThrowError: React.FC () { const [error, setError] useStateError(); const onClick () { setError(new Error(An Uncaught Error)); }; if (error) { throw error; } return Button danger onClick{onClick}Click me to throw a error/Button; }; const App: React.FC () ( ErrorBoundary ThrowError / /ErrorBoundary );实现原理ErrorBoundary.tsx 是一个标准的 React 类组件错误边界通过componentDidCatch捕获子树错误并把error与info.componentStack存入 state当error存在时渲染一个typeerror的 Alert其中message默认取error.toString()description默认取组件堆栈componentStack并以pre标签包裹以保留堆栈换行格式未传message/description时自动使用上述默认值即文档表中{{ error }}与{{ error stack }}的含义。测试用例components/alert/tests/index.test.tsx验证了这一点当子组件抛出ReferenceError: NotExisted is not defined时页面中会出现包含该错误文本的rolealert节点。无障碍与属性透传Alert 在无障碍方面做了较完整的处理且均有测试覆盖accessibilityTest、rtlTest位于 components/alert/tests/index.test.tsx默认rolealert根节点默认带rolealertAlert.tsx可被屏幕阅读器即时播报也可通过role属性覆盖data-*与aria-*透传通过rc-util的pickAttrs将传入的data-*/aria-*属性透传到根节点Alert.tsx测试中验证了data-test、data-id、aria-describedby的正确挂载closable 的 ARIA 配置closable对象形式支持传入aria-label等属性源码在 Alert.tsx 中会把closable对象里的closeIcon剔除其余属性全部展开到关闭按钮上RTL 支持direction rtl时自动追加-rtl类名Alert.tsx并注册了rtlTest测试。另外组件通过forwardRef暴露了AlertRef包含nativeElement根 DOM 节点引用可用于外部测量或聚焦等操作Alert.tsx。关闭动画原理Smoothly Unmount 背后的 CSSMotionAlert 的关闭并非瞬间消失而是有一个高度坍缩 淡出的动画。这与message等组件的实现一致都基于rc-motion的CSSMotion封装Alert.tsxCSSMotion visible{!closed} motionName{${prefixCls}-motion} motionAppear{false} motionEnter{false} onLeaveStart{(node) ({ maxHeight: node.offsetHeight })} onLeaveEnd{afterClose} 关闭时记录元素当前高度offsetHeight作为maxHeight起始值样式层通过-motion-leave/-motion-leave-active两个类名完成max-height从当前高度到 0、透明度到 0 的过渡并同步压缩padding与margin见 style/index.ts动效时长使用motionDurationSlow、缓动曲线使用motionEaseInOutCircafterClose正是在onLeaveEnd时被触发因此动画结束后再卸载组件是天然支持的。Design Token基于 CSS-in-JS 的主题定制Alert 是 Ant Design 5.x CSS-in-JS 体系下的标准组件样式通过genStyleHooks(Alert, ...)注册style/index.ts可通过ConfigProvider的theme.components.Alert进行 token 级定制。组件级 Token 一览样式文件顶部定义了ComponentToken接口style/index.ts对应文档中 Design Token 表格的内容TokenDescription默认值来自 prepareComponentTokendefaultPadding默认内间距paddingContentVerticalSM 水平 12pxwithDescriptionPadding带有描述时的内间距paddingMDpaddingContentHorizontalLGwithDescriptionIconSize带有描述时的图标尺寸fontSizeHeading3默认值在prepareComponentToken中计算style/index.ts全部基于全局主题 token 派生因此跟随主题明暗模式自动适配。实战示例覆盖 Token参考 components/alert/demo/component-token.tsx通过ConfigProvider局部定制ConfigProvider theme{{ components: { Alert: { withDescriptionIconSize: 32, withDescriptionPadding: 16, }, }, }} Alert icon{SmileOutlined /} messageSuccess Tips descriptionDetailed description and advices about successful copywriting. typesuccess showIcon / /ConfigProvider样式结构拆解样式实现被拆成三个 generatorstyle/index.tsgenBaseStyle基础布局根节点为display: flex的水平弹性布局图标 内容区 操作区 关闭按钮内容区flex: 1-with-description模式下改为align-items: flex-start顶部对齐、标题放大为fontSizeLG、图标放大为withDescriptionIconSize-banner模式去边框去圆角genTypeStyle四种类型配色分别取自全局 token 的colorSuccess*、colorInfo*、colorWarning*、colorError*背景色、边框色、图标色三件套genActionStyle关闭按钮与操作区样式关闭图标 hover 时从colorIcon过渡到colorIconHover。与周边组件的组合使用Alert 是静态容器组件可安全地与其他组件嵌套组合官方测试用例提供了两个典型组合components/alert/tests/index.test.tsx与 Tooltip 组合用Tooltip titlexxxAlert ...//Tooltip包裹悬停显示额外说明与 Popconfirm 组合把 Popconfirm 挂在 Alert 的action区域实现点击操作前二次确认。此外closable的兜底逻辑支持读取ConfigProvider中的全局alert配置alert?.closable、alert?.closeIcon这意味着可以通过 ConfigProvider 统一为整个应用的 Alert 开启/定制关闭能力Alert.tsx。小结本文基于 components/alert/index.en-US.md 完整梳理了 Alert 的使用方式四种类型与banner模式、可关闭与动画回调、图标控制、自定义操作区、错误边界等并结合 Alert.tsx、ErrorBoundary.tsx、style/index.ts 源码揭示了类型默认值推导、可关闭性判定优先级、CSSMotion 高度坍缩动画、Design Token 派生等底层机制。想深入验证的读者可直接阅读 components/alert/tests/index.test.tsx 中的 200 余行测试覆盖了关闭交互、属性透传、错误边界、RTL 与无障碍等全部关键行为。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Ant Design Alert 组件完全指南：从基础用法到源码级实现原理
Ant Design Alert 组件完全指南从基础用法到源码级实现原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读Alert警告提示是 Ant Design 中用于向用户展示需要关注信息的反馈类组件它适合承载非交互式、需要持续展示且可由用户主动关闭的静态提示内容。本文以 components/alert/index.en-US.md 为骨架结合组件源码、样式 token 与测试用例系统讲解 Alert 的 10 个核心 API、12 个官方示例场景、Alert.ErrorBoundary错误边界用法以及其在 CSS-in-JS 下的 Design Token 定制方式帮助你从会使用进阶到懂原理。使用场景When To Use根据官方文档Alert 适用于两类场景需要向用户展示警告/提示类信息例如操作结果反馈、风险提醒、系统公告需要一个持久存在的静态容器内容由用户主动操作点击关闭按钮来消除。与message/notification这类临时弹出、自动消失的轻量提示不同Alert 是常驻页面的静态组件用于承载需要用户看到并理解的上下文信息因此它更强调内容的可读性与可关闭性。快速上手最基础的用法从 components/alert/demo/basic.tsx 可以看到Alert 的最小使用方式只需一个message属性import React from react; import { Alert } from antd; const App: React.FC () Alert messageSuccess Text typesuccess /; export default App;components/alert/demo/style.tsx 则展示了四种内置类型success、info、warning、error分别对应成功、信息、警告、错误四种语义四种类型由type属性切换Alert messageSuccess Text typesuccess / Alert messageInfo Text typeinfo / Alert messageWarning Text typewarning / Alert messageError Text typeerror /需要说明的是type并非必填。查看 Alert.tsx 的源码可以发现组件内部对type做了记忆化合并const type React.useMemoAlertProps[type](() { if (props.type ! undefined) { return props.type; } // banner mode defaults to warning return banner ? warning : info; }, [props.type, banner]);即未显式传type时普通模式默认infobanner 模式默认warning。这与文档 API 表中info, inbannermode default iswarning的描述完全一致。核心 API 详解属性总览以下表格完整收录了 components/alert/index.en-US.md API 章节的全部属性PropertyDescriptionTypeDefaultVersionactionThe action of AlertReactNode-4.9.0afterCloseCalled when close animation is finished() void--bannerWhether to show as bannerbooleanfalse-closableThe config of closable5.15.0 支持aria-*boolean | ({ closeIcon?: React.ReactNode } React.AriaAttributes)false-descriptionAdditional content of AlertReactNode--iconCustom iconeffective whenshowIconis trueReactNode--messageContent of AlertReactNode--showIconWhether to show iconbooleanfalsebanner模式下默认为 true-typeType of Alert stylesoptions:success,info,warning,errorstringinfobanner模式下默认为warning-onCloseCallback when Alert is closed(e: MouseEvent) void--此外文档明确提示Common props 对所有组件通用例如rootClassName根元素 className、className、style、id等属性同样适用于 Alert详见 Common Props 文档。message 与 description标题与附加描述messageAlert 的主文案必填语义上的核心内容description附加的补充描述传入后组件会进入带描述布局with-description标题字号放大、图标加大、内边距随之调整。参考 components/alert/demo/description.tsxAlert messageSuccess Text descriptionSuccess Description Success Description Success Description typesuccess /从源码看当description存在时根节点会追加-with-description类名Alert.tsx样式层为它单独设计了withDescriptionPadding与withDescriptionIconSize两个专属 token详见下文 Design Token 章节。closable 与 onClose可关闭提示closable从 5.15.0 开始支持传入对象形式可在其中指定自定义关闭图标closeIcon以及任意aria-*无障碍属性Alert messageError Text descriptionError Description typeerror closable{{ aria-label: close, closeIcon: CloseSquareFilled /, }} onClose{onClose} /完整示例见 components/alert/demo/closable.tsx。这里有几个值得展开的细节1. 关闭回调onClose点击关闭按钮后触发回调参数为鼠标事件(e: MouseEvent) void在 Alert.tsx 中handleClose会先将内部closed状态置为true再调用外部传入的onClose。2. 关闭动画结束回调afterClose动画完全结束后触发。参考 components/alert/demo/smooth-closed.tsx它常用于关闭后从页面卸载 Alert的受控场景const [visible, setVisible] useState(true); const handleClose () { setVisible(false); }; return ( {visible ( Alert messageAlert Message Text typesuccess closable afterClose{handleClose} / )} Switch onChange{setVisible} checked{visible} disabled{visible} / / );3. 可关闭性的判定逻辑源码 Alert.tsx 中isClosable的判定优先级依次为closable为对象且含closeIcon→ 存在废弃的closeText→closable为布尔值 →closeIcon非false/null/undefined→ 兜底读取ConfigProvider全局配置alert?.closable。也就是说只要显式传了closeIcon或closeText即使没写closable也会显示关闭按钮。4. 默认关闭图标未自定义closeIcon时使用默认的CloseOutlinedAlert.tsx点击区域渲染为语义化的button typebutton元素。5. 废弃 APIcloseText旧版closeText已被标记为 deprecated控制台会输出升级提示官方建议迁移到closable.closeIconAlert.tsx。banner 模式通栏横幅banner为true时Alert 变成无圆角、无边框的通栏横幅常用于页面顶部公告并且默认展示图标showIcon默认值变为true、默认类型变为warning。参考 components/alert/demo/banner.tsxAlert messageWarning text banner / Alert messageVery long warning text banner closable / Alert showIcon{false} messageWarning text without icon banner / Alert typeerror messageError text banner /样式层面对应 style/index.ts 中的banner规则border: 0、borderRadius: 0保证通栏无缝衔接页面边缘。源码层面isShowIcon的默认逻辑是banner 且未显式传showIcon时强制为trueAlert.tsx。拓展玩法跑马灯公告。components/alert/demo/loop-banner.tsx 展示了把message换成任意 React 节点的能力——结合react-fast-marquee即可实现循环滚动的公告条Alert banner message{ Marquee pauseOnHover gradient{false} I can be a React component, multiple React components, or just some text. /Marquee } /这印证了一个重要事实message、description、action等属性均为ReactNode类型可以自由嵌入组件、图标乃至动画库。showIcon 与 icon图标控制showIcon是否展示类型图标默认falsebanner 模式下默认trueicon自定义图标仅在showIcon为true时生效。参考 components/alert/demo/icon.tsx 与 components/alert/demo/custom-icon.tsxAlert messageSuccess Tips typesuccess showIcon / Alert icon{SmileOutlined /} messageSuccess Tips typesuccess showIcon /源码中的IconNodeAlert.tsx维护了一张类型到图标的映射表const iconMapFilled { success: CheckCircleFilled, info: InfoCircleFilled, error: CloseCircleFilled, warning: ExclamationCircleFilled, };未传自定义icon时按type从映射表取出对应实心图标传入icon时则用replaceElement包一层${prefixCls}-icon容器。四个类型对应的图标分别是CheckCircleFilled成功、InfoCircleFilled信息、CloseCircleFilled错误、ExclamationCircleFilled警告。action自定义操作区action属性4.9.0 起支持用于在 Alert 右侧渲染操作按钮典型场景是UNDO 撤销、查看详情、接受/拒绝等。参考 components/alert/demo/action.tsxAlert messageSuccess Tips typesuccess showIcon action{Button sizesmall typetextUNDO/Button} closable /源码在渲染顺序上action位于contentmessage description之后、关闭按钮之前Alert.tsx样式上使用marginInlineStart: marginXS与内容区拉开间距style/index.ts。Alert.ErrorBoundaryReact 错误边界Alert.ErrorBoundary是挂在 Alert 上的静态子组件通过复合组件方式挂载见 index.tsx用于捕获子树中抛出的渲染错误并展示为错误提示避免整个页面白屏。APIPropertyDescriptionTypeDefaultVersiondescriptionCustom error description to showReactNode{{ error stack }}错误堆栈-messageCustom error message to showReactNode{{ error }}错误对象字符串化-用法示例参考 components/alert/demo/error-boundary.tsxconst { ErrorBoundary } Alert; const ThrowError: React.FC () { const [error, setError] useStateError(); const onClick () { setError(new Error(An Uncaught Error)); }; if (error) { throw error; } return Button danger onClick{onClick}Click me to throw a error/Button; }; const App: React.FC () ( ErrorBoundary ThrowError / /ErrorBoundary );实现原理ErrorBoundary.tsx 是一个标准的 React 类组件错误边界通过componentDidCatch捕获子树错误并把error与info.componentStack存入 state当error存在时渲染一个typeerror的 Alert其中message默认取error.toString()description默认取组件堆栈componentStack并以pre标签包裹以保留堆栈换行格式未传message/description时自动使用上述默认值即文档表中{{ error }}与{{ error stack }}的含义。测试用例components/alert/tests/index.test.tsx验证了这一点当子组件抛出ReferenceError: NotExisted is not defined时页面中会出现包含该错误文本的rolealert节点。无障碍与属性透传Alert 在无障碍方面做了较完整的处理且均有测试覆盖accessibilityTest、rtlTest位于 components/alert/tests/index.test.tsx默认rolealert根节点默认带rolealertAlert.tsx可被屏幕阅读器即时播报也可通过role属性覆盖data-*与aria-*透传通过rc-util的pickAttrs将传入的data-*/aria-*属性透传到根节点Alert.tsx测试中验证了data-test、data-id、aria-describedby的正确挂载closable 的 ARIA 配置closable对象形式支持传入aria-label等属性源码在 Alert.tsx 中会把closable对象里的closeIcon剔除其余属性全部展开到关闭按钮上RTL 支持direction rtl时自动追加-rtl类名Alert.tsx并注册了rtlTest测试。另外组件通过forwardRef暴露了AlertRef包含nativeElement根 DOM 节点引用可用于外部测量或聚焦等操作Alert.tsx。关闭动画原理Smoothly Unmount 背后的 CSSMotionAlert 的关闭并非瞬间消失而是有一个高度坍缩 淡出的动画。这与message等组件的实现一致都基于rc-motion的CSSMotion封装Alert.tsxCSSMotion visible{!closed} motionName{${prefixCls}-motion} motionAppear{false} motionEnter{false} onLeaveStart{(node) ({ maxHeight: node.offsetHeight })} onLeaveEnd{afterClose} 关闭时记录元素当前高度offsetHeight作为maxHeight起始值样式层通过-motion-leave/-motion-leave-active两个类名完成max-height从当前高度到 0、透明度到 0 的过渡并同步压缩padding与margin见 style/index.ts动效时长使用motionDurationSlow、缓动曲线使用motionEaseInOutCircafterClose正是在onLeaveEnd时被触发因此动画结束后再卸载组件是天然支持的。Design Token基于 CSS-in-JS 的主题定制Alert 是 Ant Design 5.x CSS-in-JS 体系下的标准组件样式通过genStyleHooks(Alert, ...)注册style/index.ts可通过ConfigProvider的theme.components.Alert进行 token 级定制。组件级 Token 一览样式文件顶部定义了ComponentToken接口style/index.ts对应文档中 Design Token 表格的内容TokenDescription默认值来自 prepareComponentTokendefaultPadding默认内间距paddingContentVerticalSM 水平 12pxwithDescriptionPadding带有描述时的内间距paddingMDpaddingContentHorizontalLGwithDescriptionIconSize带有描述时的图标尺寸fontSizeHeading3默认值在prepareComponentToken中计算style/index.ts全部基于全局主题 token 派生因此跟随主题明暗模式自动适配。实战示例覆盖 Token参考 components/alert/demo/component-token.tsx通过ConfigProvider局部定制ConfigProvider theme{{ components: { Alert: { withDescriptionIconSize: 32, withDescriptionPadding: 16, }, }, }} Alert icon{SmileOutlined /} messageSuccess Tips descriptionDetailed description and advices about successful copywriting. typesuccess showIcon / /ConfigProvider样式结构拆解样式实现被拆成三个 generatorstyle/index.tsgenBaseStyle基础布局根节点为display: flex的水平弹性布局图标 内容区 操作区 关闭按钮内容区flex: 1-with-description模式下改为align-items: flex-start顶部对齐、标题放大为fontSizeLG、图标放大为withDescriptionIconSize-banner模式去边框去圆角genTypeStyle四种类型配色分别取自全局 token 的colorSuccess*、colorInfo*、colorWarning*、colorError*背景色、边框色、图标色三件套genActionStyle关闭按钮与操作区样式关闭图标 hover 时从colorIcon过渡到colorIconHover。与周边组件的组合使用Alert 是静态容器组件可安全地与其他组件嵌套组合官方测试用例提供了两个典型组合components/alert/tests/index.test.tsx与 Tooltip 组合用Tooltip titlexxxAlert ...//Tooltip包裹悬停显示额外说明与 Popconfirm 组合把 Popconfirm 挂在 Alert 的action区域实现点击操作前二次确认。此外closable的兜底逻辑支持读取ConfigProvider中的全局alert配置alert?.closable、alert?.closeIcon这意味着可以通过 ConfigProvider 统一为整个应用的 Alert 开启/定制关闭能力Alert.tsx。小结本文基于 components/alert/index.en-US.md 完整梳理了 Alert 的使用方式四种类型与banner模式、可关闭与动画回调、图标控制、自定义操作区、错误边界等并结合 Alert.tsx、ErrorBoundary.tsx、style/index.ts 源码揭示了类型默认值推导、可关闭性判定优先级、CSSMotion 高度坍缩动画、Design Token 派生等底层机制。想深入验证的读者可直接阅读 components/alert/tests/index.test.tsx 中的 200 余行测试覆盖了关闭交互、属性透传、错误边界、RTL 与无障碍等全部关键行为。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
